• 解决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   }
  • 相关阅读:
    LeetCode1051. 高度检查器 Java
    LeetCode 面试题 16.04. 井字游戏 Java
    WPF 显示3D密集场景,堆场管理系统
    WPF 饼状图,柱形图,折线图 (3 饼状图)
    WPF 饼状图,柱形图,折线图 (2 折线图)
    WPF 饼状图,柱形图,折线图 (1 柱形图)
    wpf 实现控件拖拽(仿windows 桌面图标拖拽)
    设计模式-控制反转
    Socket 网络编程和IO模型
    wpf 滚动文字 跑马灯
  • 原文地址:https://www.cnblogs.com/jingh/p/6265029.html
Copyright © 2020-2023  润新知