类似淘宝侧边栏jq代码编写

　　

$(function() {
    var recommend_offTop = $('.recommend').offset().top;
    var flag = true;
    // 当页面卷相关位置的时候，固定栏显示
    ifdisplay()

    function ifdisplay() {
        $(document).on("scroll", function() {
            if ($(this).scrollTop() >= recommend_offTop) {
                $(".fixedtool").fadeIn();
            } else {
                $(".fixedtool").fadeOut();
            }
            if (flag) {
                // 当滚轮滑动到相应位置，固定栏的位置发生相应变化
                $(".floor .w").each(function(i, e) {
                    if ($(document).scrollTop() >= $(e).offset().top) {
                        // console.log(11)
                        // 滚轮滚到一定位置，固定栏小li发生相应变化
                        $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
                    }
                })
            }
        })
    }

    // 当点击某个小li的时候，对应的颜色变了，跳转到相应的位置
    $(".fixedtool").on("click", "li", function() {
        flag = false;
        // 点击小li，自己的颜色变了，兄弟去掉
        $(this).addClass("current").siblings().removeClass("current");
        var index = $(this).index()
        var offsetT = $(".floor").children().eq(index).offset().top
        $("body, html").stop().animate({ scrollTop: offsetT }, function() {
            flag = true;
        })
        console.log(offsetT)
    })
})

 

来源：https://www.cnblogs.com/rainbowupdate/p/12594298.html