On my website, I have implemented two menus - one to be displayed when the page loads and another to show up when a scroll occurs. You can view my page here.
The goal is to have the white part visible when the position is at the top, and switch to the blue part upon scrolling past the top position.
Here is the current code snippet that I am using:
<script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
<script type='text/javascript'>
$(function(){
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight){
$('header').removeClass('nav-bar-below op-page-header cf').addClass('banner include-nav');
} else {
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('banner include-nav').addClass('nav-bar-below op-page-header cf');
}
}
lastScrollTop = st;
}
});
</script>
I'm facing issues with this implementation. Can someone please assist me in resolving this problem?