php如何监听页面滚动,导航条滚动监听事件-函数

语法：$(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

);

});

});

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