导航条滚动监听事件-函数

2019独角兽企业重金招聘Python工程师标准>>>

语法：$(document).scroll(function(){}

1、导航条滚动监听，比较适合有固定高度的滚动

$(document).scroll(function(){
        //滚动监听document高度控制左边导航选中
        var scrollTop = $(document).scrollTop();
        if(scrollTop>700 && scrollTop<960){
            $(".serviceRow").addClass('on').siblings('on').removeClass('on');
        }
        else{$(".serviceRow").removeClass('on')};

        if(scrollTop>960 && scrollTop<1380){
            $(".scaleRow").addClass('on').siblings('on').removeClass('on');
        }
        else{$(".scaleRow").removeClass('on')};

        if(scrollTop>1380 && scrollTop<1500){
            $(".moneyRow").addClass('on').siblings('on').removeClass('on');
        }
        else{$(".moneyRow").removeClass('on')};

        if(scrollTop>1500 && scrollTop<1820){
            $(".localRow").addClass('on').siblings('on').removeClass('on');
        }
        else{$(".localRow").removeClass('on')};
    });

2、导航条滚动监听，点击跳转距离顶部高度为0

$(document).scroll(function(){
        var scrollTop = $(document).scrollTop();
        if(scrollTop>219){
            $(".floor-bar-left").slideDown("slow");
        }
        else{
            $(".floor-bar-left").slideUp("fast");
        };
        //锚点跳转平滑过渡
        $('.floor-bar-left a').click(function(){
            $('html, body').animate({
                scrollTop: $( $.attr(this, 'href') ).offset().top
            }, 300);
            return false;
        });
    });

 

3、导航条滚动监听，点击跳转距离顶部高度为50像素，适合不固定的滚动条监听
    $(document).ready(function() {
        //窗口的事件：
        var $sectionBlock = $(".sectionBlock");
        var $floorLi = $(".navbar-example li");
        $(window).scroll(function(){
            var x = $(window).scrollTop();  //当前的卷动高度
            if(x < $sectionBlock.eq(1).offset().top - 55){
                $floorLi.eq(0).addClass("active").siblings().removeClass("active");
            }else if(x < $sectionBlock.eq(2).offset().top - 55){
                $floorLi.eq(1).addClass("active").siblings().removeClass("active");
            }else if(x < $sectionBlock.eq(3).offset().top - 55){
                $floorLi.eq(2).addClass("active").siblings().removeClass("active");
            }else if(x < $sectionBlock.eq(4).offset().top - 55){
                $floorLi.eq(3).addClass("active").siblings().removeClass("active");
            }else if(x >= $sectionBlock.eq(4).offset().top - 55){
                $floorLi.eq(4).addClass("active").siblings().removeClass("active");
            } 
        });

        //点击楼层导航的时候：
        $(".navbar-example li").click(function(){
            $("html,body").animate(
                {"scrollTop" : $(".sectionBlock").eq($(this).index()).offset().top- 55},1000
            );
        });
    });

 

//如有误，麻烦联系更改，谢谢

转载于:https://my.oschina.net/parchments/blog/816266