scroll()和scrollTop()方法——实现电商网站中的电梯导航

Posted 2020-09-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scroll()和scrollTop()方法——实现电商网站中的电梯导航相关的知识，希望对你有一定的参考价值。

要想实现电商网站的电梯导航效果，首先需要了解以下知识点：

jquery 事件 - scroll() 方法

对元素滚动的次数进行计数，当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

jquery CSS 操作 - scrollTop() 方法

设置元素中滚动条的垂直偏移，scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置；scroll top offset 指的是滚动条相对于其顶部的偏移；如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
【scrollTop()俗称“卷边函数”，获取到的是当滚动条滚动时，该页面文档被浏览器最顶端所卷去的高度；另外还有scrollLeft()方法，顾名思义是被浏览器最左端所卷去的距离】

jQuery CSS 操作 - offset() 方法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

电梯导航的结构布局怎么做？
布局这一块并不是固定的，只要效果达到就好。

<ul class="dianTi">
        <li>
            1F
            <div class="wenZi">服饰</div>
        </li>
        <li>
            2F
            <div class="wenZi">美妆</div>
        </li>
        <li>
            3F
            <div class="wenZi">手机</div>
        </li>
        <li>
            4F
            <div class="wenZi">家电</div>
        </li>
        <li>
            5F
            <div class="wenZi">数码</div>
        </li>
    </ul>

电梯导航的CSS样式该怎么写？
宽度可以给一个固定的值；高度本应该由JS去控制，这里是给的固定的值；定位方式采用的是固定定位，让它垂直到中间，水平先到浏览器的中间，然后设置margin-left为负的网页版心的一半距离，这样就紧贴在页面左侧位置了；默认是隐藏的。

<style type="text/css">
        .dianTi{width: 30px; height: 150px; position: fixed; top: 50%; margin-top: -75px;
            left: 50%; margin-left: -660px; color: #666; cursor: pointer; display: none;}
        .dianTi li{height: 29px; border-bottom: 1px dotted #ccc; text-align: center;
            line-height: 29px; position: relative;}
        .wenZi{width: 29px; height: 29px; position: absolute; left: 0; top: 0; color: #C81623;
            background: #fff; display: none;}
        .dianTi li.current .wenZi{display: block;}
        .dianTi li:hover .wenZi{display: block; background: #C81623; color: #fff;}
    </style>

怎么实现最终的效果？
1.电商网站一般是吧商品分为一楼、二楼、三楼…所以，第一步先要获取每一个楼层相对于document (0,0)的距离。

//检测楼层时，跳转时，不需要那么精确，所以减去100
var f1Top=$(‘.f1‘).offset().top-100;
var f2Top=$(‘.f2‘).offset().top-100;
var f3Top=$(‘.f3‘).offset().top-100;
var f4Top=$(‘.f4‘).offset().top-100;
var f5Top=$(‘.f5‘).offset().top-100;

2.检测楼层，用scrollTop()方法获取当滚动条滚动时每次最新的被卷去的高度，即当前可视区域内最顶部距离document (0,0)的距离，然后拿这个距离的值去和之前得到的每个楼层对应的值进行比较，就可以知道当前滚动条滚动到哪个区域了。这里最好将这个功能性的模块封装起来，写成一个方法，然后用$(window).scroll(jianCe)去调用。

var jianCe=function(){
    var windowScrollTop=$(window).scrollTop();

    if(windowScrollTop>=f5Top){
        console.log(‘到达5楼‘);
        //到达5楼
        $(‘.dianTi‘).show();
        $(‘.dianTi li‘).eq(4).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘);
    }else if(windowScrollTop>=f4Top){
        console.log(‘到达4楼‘);
        //到达4楼
        $(‘.dianTi‘).show();
        $(‘.dianTi li‘).eq(3).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘);
    }else if(windowScrollTop>=f3Top){
        console.log(‘到达3楼‘);
        //到达3楼
        $(‘.dianTi‘).show();
        $(‘.dianTi li‘).eq(2).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘);
    }else if(windowScrollTop>=f2Top){
        console.log(‘到达2楼‘);
        //到达2楼
        $(‘.dianTi‘).show();
        $(‘.dianTi li‘).eq(1).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘);
    }else if(windowScrollTop>=f1Top){
        console.log(‘到达1楼‘);
        //到达一楼
        $(‘.dianTi‘).show();
        $(‘.dianTi li‘).eq(0).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘);
    }else{
        //不再5楼中的任意一层时，让电梯导航隐藏
        $(‘.dianTi‘).hide();
    }
}

3.当点击左侧电梯导航时，也需要对应起来，因为在点击时，按钮会有一个特殊类用于突出显示，如果从5层跳到1层，会经过4,3,2，这样就会看到整个跳转的过程，所以，这里需要用到一个off（）方法，用于取消绑定事件，$(window).off(‘scroll’); 因为你移除了scroll事件，当前这个LI具备特殊类名还要再书写一次，最后只需要判断当前点击的是第几层，做相应的操作即可。

   $(‘.dianTi li‘).click(function(event) {
        //在动画运动的过程中，不希望current特殊类名跟着满世界跑
        //所以把让current满世界跑的源头掐掉
        //源头：$(window).scroll()
        $(window).off(‘scroll‘);
        //因为你移除了scroll事件，当前这个LI具备特殊类名还要再书写一次
        $(this).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘);
        //需要知道现在要往几层楼跳
        //得到当前这个LI的序号，这个序号加1就是你需要去的楼层
        var i=$(this).index()+1;
        if(i==5){
            //要往第5层跳
            //检测楼层时，希望的差不多到了；跳转时，需要精确，所以再加上100
            //f5Top是5层距离document （0，0）点的距离
            //但是当动画执行完毕了，还要继续检测楼层
            $(‘html,body‘).stop().animate({‘scrollTop‘:f5Top+100}, 500,function(){
                $(window).scroll(jianCe);
            }); 
        }else if(i==4){
            $(‘html,body‘).stop().animate({‘scrollTop‘:f4Top+100}, 500,function(){
                $(window).scroll(jianCe);
            });
        }else if(i==3){
            $(‘html,body‘).stop().animate({‘scrollTop‘:f3Top+100}, 500,function(){
                $(window).scroll(jianCe);
            });
        }else if(i==2){
            $(‘html,body‘).stop().animate({‘scrollTop‘:f2Top+100}, 500,function(){
                $(window).scroll(jianCe);
            });
        }else if(i==1){
            $(‘html,body‘).stop().animate({‘scrollTop‘:f1Top+100}, 500,function(){
                $(window).scroll(jianCe);
            });
        }
    });

以上是关于scroll()和scrollTop()方法——实现电商网站中的电梯导航的主要内容，如果未能解决你的问题，请参考以下文章

js window.scroll 怎么判断滚动到底部

scroll滚动条

获取页面scroll高度

难搞的滚动事件(滚动默认，scrollTop)

js的onscroll、scrollTop、scrollHeight及window.scroll

scroll时不能平滑滚动的问题怎么处理