JQUEYR 实现导航滚动监听简单实现方式

来源:互联网 发布:知乎 董洁人品 编辑:程序博客网 时间:2024/05/22 07:59

JQUEYR 实现导航滚动监听简单实现方式


<script>
$(function(){
var top = $(".index_item").eq(0).offset().top;
var ditem = $(".index_item");
var h = $(window).height();
$(window).scroll(function(){
var bodytop = $(this).scrollTop();
if(bodytop >= top){
$(".left_nav").addClass("fixd");
}else{
$(".left_nav").removeClass("fixd");
}
ditem.each(function(index, element) {
            var thisTop = $(this).offset().top;
var thish   = $(this).height();
var thish2  = thisTop+thish;
if(bodytop >= thisTop && bodytop <=thish2){
$(".left_nav ul li").removeClass("left_nav-h").eq(index).addClass("left_nav-h");
}
        });
});
$(".left_nav ul li").click(function(){
var index = $(this).index();
var offtop = $(".index_item").eq(index).offset().top;
$("html,body").animate({scrollTop:offtop},500)
})
})
</script>

原创粉丝点击