Почему навигационная панель не меняет цвет фона после прокрутки?

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'); 
}