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

不想你离开。 提交于 2020-03-29 21:18:54

  

$(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)
    })
})

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!