淘宝固定侧边栏 电梯侧边栏做法

 这是一个淘宝侧边栏电梯的案例。

主要实现的功能:

1.当页面滑到手机栏显示  2.点哪个小li 页面就会滑到哪个模块  3.滑到哪块模块对应的小li变红

 $(function() {
            //当我们点击了小li之后，不需要执行滚到哪里小li变红
            var flag = true;
            var toolTop = $(".shouji").offset().top;
            //到了手机模块显示，
            console.log(toolTop);
            $(window).scroll(function() {
                if ($(document).scrollTop() >= toolTop) {
                    $(".fixedtool").fadeIn();
                } else {
                    $(".fixedtool").fadeOut();
                }

                if (flag) {
                    //页面滚动到哪里就给哪个小li添加current
                    $(".floor .w").each(function(i, ele) {
                        if ($(document).scrollTop() >= $(ele).offset().top) {
                            $(".fixedtool li").eq(i + 1).addClass("current").siblings().removeClass();
                        }
                    })
                }
            })

            //点击哪个小li到哪个模块
            $(".fixedtool li").click(function() {
                flag = false;
                //点击哪个小li哪个变红
                $(this).addClass("current").siblings().removeClass();
                var current = $(".floor .w").eq($(this).index()).offset().top;
                $("body,html").stop().animate({
                    scrollTop: current
                }, function() {
                    flag = true;
                });
            })

        })

 这个结构很重要，

第一个功能，先获取到手机模块距离文本顶部的距离，然后当页面滚动超过这个距离，侧边栏浅入 否则浅出。

第二个功能，获取小li的索引，然后再获取楼层模块距离文本顶部距离的时候将索引传入。这样对应的小li和对应的楼层就关联起来了，最后添加动画 滚动的距离就是当前对应楼层距离文本顶部的距离。

第三个功能，遍历整个楼层 如果页面滚动的距离超过这个楼层距离页面顶部的距离，那么就给当前对应的小li增加红色类。主要的就是遍历楼层中的 i 和ele

最后这样写出来会有一点bug，就是滑动页面小li会闪动。所以我加了节流阀。