スクロール後にnavbarの色を変更しますが、即時に変更しないでください

Question

ここに私のコードです。スクロールするとナビバーの色などが変わります（200ms）。しかし、私は次のセクションからちょっと上のときに、ただちに変更するのではなく、変更したいと思っています。

つまり、同じセクションではなく、次のセクションで色を変更するにはどうすればよいですか？

$(function() { 
 
    $(document).scroll(function() { 
 
    var $nav = $(".navbar-fixed-top"); 
 
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); 
 
    }); 
 
});

.navbar-fixed-top.scrolled { 
 
    background-color: #ff9933 !important; 
 
    transition: background-color 200ms linear; 
 
} 
 

 
.navbar-fixed-top.scrolled li a:hover, 
 
.navbar-nav li.active a { 
 
    background: #ff9933 !important; 
 
    color: rgba(59, 63, 66, 0.7) !important; 
 
} 
 

 
.navbar-fixed-top.scrolled li.active a { 
 
    color: black !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#myPage">Logo</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#about">ONE</a></li> 
 
     <li><a href="#services">TWO</a></li> 
 
     <li><a href="#portfolio">THREE</a></li> 
 
     <li><a href="#contact">FOUR</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

$(document).ready(function(){  
      var scroll_pos = 0; 
      $(document).scroll(function() { 
       scroll_pos = $(this).scrollTop(); 
       if(scroll_pos > 642) { 
        $(".navbar-fixed-top").css('background-color', '#757de8'); 
       } else { 
        $(".navbar-fixed-top").css('background-color', 'white'); 
       } 
      }); 
     });