You don’t set the ‘position: fixed’ in CSS. You have to do it using javascript. The sample is given below.
var header = document.getElementById("header").offsetTop;
var docTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var adHeight = Number(getStyleValue(elem, "height").replace("px", ""));
if ((header - docTop) < 60) {
elem.style.position = "fixed";
elem.style.top = "60px";
document.getElementById("header").style.position = "sticky";
}
you should set the id in header tag then using the id we can set the position fixed while scrolling the page.
One option would be to give the next element below it (or the next container around those elements) a `top-margin: <amount in pixels>px`. Although, if it’s fixed, that may appear as a gap in the page when the user scrolls and the header moves with the page. If it’s at the top of the page, it shouldn’t be a problem.