javascript - jQuery-在特定点改变导航栏的颜色

Question

除了我的“关于我们”页面之外，我目前在每个网页上都使用此功能。 基本上，我使用了变量:

<div class="spacer"></div>
<p id="startchange">

它链接到 JQuery 以启动颜色更改/用另一个图像替换图像。目前这两个属性都没有改变，但是在其他页面上它们工作得很好:因为 sticky nav bar 使用航路点变得更小。我在我的代码中很早就使用了这些变量(就在标题下面)。

似乎无论我把它们放在哪里，它们似乎都不会执行，我不确定为什么。

jQuery:

    <script>

    $(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('#navbar').css('background-color', '#f0f0f0');
          $("#navbar img").attr("src", "images/logo-grey-real.jpg");
       } else {
          $('#navbar').css('background-color', '#fff');
          $("#navbar img").attr("src", "images/logo.jpg");
       }
   });
});

    </script>

Answer 1

我做了一个JSFiddle :)

HTML :

<div class="navbar"></div>
<p id="test">test</p>

Jquery :

var offset = $('#test').offset().top;
var navbar = $('.navbar');

$(document).scroll(function() {
    position = $(this).scrollTop();
    if (position < offset)
        navbar.css('background-color', 'red');
    else
        navbar.css('background-color', 'blue');
});