JQuery Offset脚本

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. 使用FSAudioController方法而不是css
2. 在制作动画之前执行animate应有所帮助。
3. 在执行stop()方法
之前检查现有颜色值

要了解有关jQuery中stop()的更多信息。

Answer 2

要使用.animate()颜色，您需要jQueryUI。所以，将框架添加到您的头脑中：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js""></script>

然后，再试一次（我稍微修改了一下你当前的代码）：

$(function(){
    $(window).on('scroll', function() { 
        checkOffset();
    });
});

function checkOffset() {
    var $target = $('#fixedBar');
    var offset = $(window).scrollTop();
    console.log(offset);
    if(offset >= 10){
        $target.stop(true, false).animate({ 'background-color': 'green'}, 1000);
        //$("#fixedBar nav a").animate({color: '#FFF'}, 1000);
    }
    else if( offset < 10 ){
        $target.stop(true, false).animate({ 'background-color': 'blue' }, 1000);
        //$("nav a").animate({color: '#1B1B1B'}, 1000);
    }
}

Check the jsFiddle

Answer 3

你应该调用checkOffset（）;再来一次：

$(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();
    });

    checkOffset(); // <-- HERE

});