解决jquery animate({scrollTop$pos},500)与$(window).scroll方法冲突的问题
当点击节点时 先移除$(window).on("scroll")监听事件 在animate动画结束之后再添加上
1 $('#J_tab li').on('click', function(){ 2 3 $(window).off(".changeCityActive"); 4 5 $('html,body').animate({scrollTop:$('.list-item-wrp[data-city="'+cityName+'"]:first').offset().top-offTop}, 400, 'easeOutExpo', function(){ 6 $(window).on("scroll.changeCityActive" , changeCityActive); 7 }); 8 }); 9 10 $(window).on("scroll.changeCityActive" , changeCityActive); 11 12 function changeCityActive(){ 13 var shTop = $('.list-item-wrp[data-city="shanghai"]:first').offset().top; 14 var hzTop = $('.list-item-wrp[data-city="hangzhou"]:first').offset().top; 15 var szTop = $('.list-item-wrp[data-city="suzhou"]:first').offset().top; 16 var njTop = $('.list-item-wrp[data-city="nanjing"]:first').offset().top; 17 var qtTop = $('.list-item-wrp[data-city="qita"]:first').offset().top; 18 19 if ($("#rank-wrp").css("position") == "fixed" && $(window).scrollTop() < hzTop -130) { 20 21 $("#J_tab li[data-city='shanghai']").addClass('active').siblings().removeClass('active'); 22 }else if ($(window).scrollTop() >= hzTop-130 && $(window).scrollTop() < szTop-130){ 23 24 $("#J_tab li[data-city='hangzhou']").addClass('active').siblings().removeClass('active'); 25 }else if ($(window).scrollTop() >= szTop-130 && $(window).scrollTop() < njTop-130){ 26 27 $("#J_tab li[data-city='suzhou']").addClass('active').siblings().removeClass('active'); 28 }else if($(window).scrollTop() >= njTop-130 && $(window).scrollTop() < qtTop-130){ 29 30 $("#J_tab li[data-city='nanjing']").addClass('active').siblings().removeClass('active'); 31 }else if($(window).scrollTop() > qtTop-130){ 32 33 $("#J_tab li[data-city='qita']").addClass('active').siblings().removeClass('active'); 34 } 35 }
