首页 > 代码库 > scroll()和scrollTop()方法——实现电商网站中的电梯导航

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,以像素计。此方法只对可见元素有效。

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

    <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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
  2. 电梯导航的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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
  3. 怎么实现最终的效果? 
    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;
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    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();
        }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    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()方法——实现电商网站中的电梯导航