Program to implement Sticky Navigation Bar.
Program to implement Sticky Navigation Bar using Javascript.
<html>
<head>
<style>
body {
margin: 0;
font-size: 28px;
}
.header {
background-color: #f1f1f1;
padding: 2px;
text-align: center;
}
#navbar {
overflow: hidden;
background-color: orange;
}
#navbar span {
display: block;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
font-weight:bold;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER</h1>
</div>
<div id="navbar">
<span>NAVIGATION BAR</span>
</div>
<div class="content">
<h3>Sticky Navigation Bar</h3>
<p>Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page.</p>
<p>In other words, it is accessible from anywhere on the website without having to scroll.</p>
<p>Although sticky navigation can be applied to any menu, such as the footer or social media buttons, we’ll focus on the main (or primary) navigation of a website.</p>
<p>This sticky navigation spreads all the way across the top, but when you scroll down the page, the design of the menu changes slightly.</p>
<p>Simplifying the design like this can be a good technique, as long as it doesn’t feel inconsistent.</p>
<p>Also, the designer has taken an increasingly popular approach by making the entire website just one page; the menu links are anchors that bump you down the page.</p>
<p>Some nice transitions and hover effects make this website enjoyable to use.</p>
</div>
<script>
window.onscroll = function() {StickyNavBar()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function StickyNavBar() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
