How to create a sticky header while body scroll?
To create a sticky header you can add a sticky-top class while body scroll in javaScript. In bootstrap theme “sticky-top” class is used for a sticky header or element. You can add & remove your custom class with javascript. here is example of html and javascript.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sticky header demo</title>
</head>
<body>
<header id="header_main" class="header"> ... </header>
<h1>Hello, world!</h1>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("header_main").classList.add("sticky-top");
} else {
document.getElementById("header_main").classList.remove("sticky-top");
}
}
</script>
</body>
</html>