javascript - JQuery 偏移脚本

Question

我正在为网站创建导航菜单。当用户滚动超过 497px 点时，它需要改变颜色。我写了这个脚本:

$(document).ready(function(){

    function checkOffset() {
      var offset = $(document).scrollTop();
      console.log(offset);
        if(offset > 497){
          $("#fixedBar").animate({backgroundColor: '#1B1B1B'}, 1000);
          $("#fixedBar nav a").animate({color: '#FFF'}, 1000);
        }else{
          $("#fixedBar").animate({backgroundColor: '#FFF'}, 1000);
          $("nav a").animate({color: '#1B1B1B'}, 1000);

        }
      }
    $(window).scroll(function() { 
      checkOffset();
     });

  });

如果我刷新页面并且它已经过了那个点那么它确实会改变，但是如果我只是滚动到那个点之后它就不会改变。我该如何解决这个问题？

Answer 1

您的脚本可能有效。

但是因为你在每个卷轴上都设置了动画。有可能有连续的动画循环。

可能的解决方案是(这些点中的任何一个)，

1. 使用 css 方法而不是 animate
2. 在动画之前执行 stop() 应该会有帮助。
3. 在执行animate 方法之前检查现有的颜色值

了解更多 stop()在 jQuery 中。