My website features a sleek navbar fixed to the top of the window. As users scroll past a specific div, the background color of the navbar changes seamlessly. This functionality has been working flawlessly for me thus far.
However, upon adding anchor links to my site, I encountered an issue. When a user clicks on an anchor link and lands on a page with the navbar, the navbar does not display the correct background color immediately. It only changes color after the user scrolls slightly. My goal is to have the navbar appear with the correct background color as soon as the user arrives on the page.
$( document ).ready(function() {
var mainbottom = $('.changenavcolor').offset().top + $('.changenavcolor').height();
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.os .navbar').addClass('navbarblue');
} else {
$('.os .navbar').removeClass('navbarblue');
}
});
});
HTML:
<header class="top-page-header">
<div class="page-overlay">
<div class="container">
<div class="row">
<div class="changenavcolor"></div>
</div>
</div>
</div>
</header>
I believe that implementing a change in nav color based on a certain y-coordinate, like switching color after reaching y=100, could resolve this issue.