I am attempting to keep the navbar at the top by setting a fixed position with 'top: 0' on scroll for navbar-default, and return the navbar to its original position when scrolling up (to top 300).
Below is my code:
var height = jQuery('.navbar-default').offset().top;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > height) {
$('.navbar-default').css({position: 'fixed', top: '0px', left: '0px', right: '0px', 'z-index': '9999999999999999'});
} else if(scroll < height) {
$('.navbar-default').css({position: 'relative', top: height, left: '0px', right: '0px', 'z-index': '9999999999999999'});
}
});
I am unsure if the 'else if' part of the code is written correctly as the navbar disappears when I scroll up. Please advise on how I can fix this issue. Thank you.
Edit: I tried adding the class 'navbar-fixed-top' on scroll and then removing it, but it caused flickering. Therefore, I am using manual positioning instead.