滚动后更改导航栏颜色但不是立即

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