Modifier la couleur de la barre de navigation après le défilement mais pas immédiatement

Question

Voici mon code. Il change les couleurs de la barre de navigation et etc quand je défile (200ms). Mais je veux les changements quand je suis un peu en hausse de la section suivante, pas immédiatement. En d'autres termes, quels changements dois-je faire pour changer de couleur sur la section suivante et non sur la même chose?

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