为什么导航栏在滚动后不改变其背景颜色？

Question

当导航栏到达页面的“关于”部分时，我正在尝试使导航栏的背景颜色从透明变为蓝色。根据来自控制台的调用，滚动后，scroll_start 变得大于 aboutOffSetTop，但导航栏颜色没有改变。为什么会发生这种情况，我该如何解决？

HTML:

<div id="titleSection"> 
    <div class="nav_bar">
        <ul> <li> <a href="index.html">HOME</a> </li>
        <li> <a href="transportation.html">TRANSPORTATION</a> </li> 
        <li> <a href="crafts.html">SHOPS</a> </li>
        <li> <a href="activities.html">EVENTS</a> </li>
        <li> <a href="food.html">FOOD</a> </li>
        </ul>
    </div>
</div>

<div class="about">
    <p> Text here </p>
</div>

CSS:

.nav_bar {
  transition: 1s;
  background-color: transparent;
}

JavaScript:

$(document).ready(function() {
  var scroll_start = 0;
  var aboutOffSetTop = $('.about').offset().top;
  $(document).scroll(function() {
    scroll_start = $(window).scrollTop();
    if(scroll_start > aboutOffSetTop) {
      $('.nav').css('background-color', 'rgba(34,34,34,0.9)');
    } else {
      $('.nav').css('background-color', 'transparent');
    }
  });
});

Answer 1

更改此部分：

if(scroll_start > aboutOffSetTop) {
            $('.nav').css('background-color', 'rgba(34,34,34,0.9)');
        } else {
            $('.nav').css('background-color', 'transparent');
}

为此：

if(scroll_start > aboutOffSetTop) {
            $('.nav_bar').css('background-color', 'rgba(34,34,34,0.9)');
        } else {
            $('.nav_bar').css('background-color', 'transparent');
}

为什么导航栏在滚动后不改变其背景颜色？

Why is the nav bar not changing its background color after scrolling?

html

javascript

css

navbar