Problem in navbar

Question

I want create a navbar just after jumbotron.I want to move with the scroll but stuck when reached at top.

Answer 1

I have a site where I do something similar the below Jquery code is a snippet of the code that controls its functionality. When the page loads the top of the navbar is about 95px down. When you scroll down the page the navbar scrolls with the page until it is about 5px from the top of the window. It then is fixed into place while the user continues to scroll down the page. When the user scrolls back up the page the navbar will unlock at the correct time and scroll with the page again. You may need to play with the pixel count and code a bit, but this should get you started.

You may also need to do some media query matching for different screen sizes like:

let mediaQueryXS = window.matchMedia("(max-width: 767px)");

function setNavLocation() {
"use strict";
$('#navbar').css('bottom', 'auto');

if(window.pageYOffset >= 90) {
// This should set it fixed to the top of the page
$('#navbar').css('position', 'fixed');
$('#navbar').css('top', '5px');
} else if (window.pageYOffset <= 91 ) {
// This will set it back so that it scrolls with the page again
$('#navbar').css('position', 'absolute');
$('#navbar').css('top', '95px');
}
}

window.onscroll = function() {
"use strict";
if(!mediaQueryXS.matches) {
setNavLocation();
}
}