My code changes the navbar colors when I scroll (200ms). However, I would like the changes to occur when I am slightly above the next section, not immediately.
In other words, what adjustments should I make to change the color in the next section and not on the same one?
$(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>