탐색 막대가 스크롤 한 후 배경색을 변경하지 않는 이유는 무엇입니까?

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

자바 스크립트 :

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