スクロール後にナビゲーションバーが背景色を変更しないのはなぜですか？

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