Hello everyone, you can learn how to create a Sticky Navigation Bar using HTML, CSS & JavaScript in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Sticky Navigation Bar
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sticky Navbar | Coding Power</title>
</head>
<body>
<div class="home">
<h1>Coding Power</h1>
<nav class="navbar" id="navbar">
<ul class="links">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio voluptas eaque corporis ad ipsa error. Soluta aperiam reprehenderit quo tempore. Corrupti blanditiis veniam expedita nobis, assumenda eaque ea sint beatae repudiandae sed nulla, in dolorem? Temporibus veniam quam saepe illo, sed voluptatem cum id, aliquam doloremque incidunt, expedita dolore consequatur nesciunt consectetur dolorem nobis minima explicabo! Facilis harum dolore quos neque labore, tempore sunt nesciunt maiores eius incidunt dignissimos quam in, dolorem perspiciatis debitis iste. Ducimus ratione modi, cupiditate voluptate enim esse ab blanditiis inventore fugiat corrupti adipisci fugit illum dolorum, mollitia quia earum! In dignissimos culpa illo animi, iure, a deleniti assumenda officiis autem facere totam veniam cum nihil ex id laborum nam. Incidunt fugit veniam qui itaque repudiandae consectetur velit facere illum reiciendis consequatur perspiciatis enim corrupti quaerat quae sint, architecto sed repellat ea, eius dolorem dolorum quisquam, minus maxime voluptate! Molestias, perspiciatis voluptatem asperiores eaque aliquid accusamus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio voluptas eaque corporis ad ipsa error. Soluta aperiam reprehenderit quo tempore. Corrupti blanditiis veniam expedita nobis, assumenda eaque ea sint beatae repudiandae sed nulla, in dolorem? Temporibus veniam quam saepe illo, sed voluptatem cum id, aliquam doloremque incidunt, expedita dolore consequatur nesciunt consectetur dolorem nobis minima explicabo! Facilis harum dolore quos neque labore, tempore sunt nesciunt maiores eius incidunt dignissimos quam in, dolorem perspiciatis debitis iste. Ducimus ratione modi, cupiditate voluptate enim esse ab blanditiis inventore fugiat corrupti adipisci fugit illum dolorum, mollitia quia earum! In dignissimos culpa illo animi, iure, a deleniti assumenda officiis autem facere totam veniam cum nihil ex id laborum nam. Incidunt fugit veniam qui itaque repudiandae consectetur velit facere illum reiciendis consequatur perspiciatis enim corrupti quaerat quae sint, architecto sed repellat ea, eius dolorem dolorum quisquam, minus maxime voluptate! Molestias, perspiciatis voluptatem asperiores eaque aliquid accusamus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio voluptas eaque corporis ad ipsa error. Soluta aperiam reprehenderit quo tempore. Corrupti blanditiis veniam expedita nobis, assumenda eaque ea sint beatae repudiandae sed nulla, in dolorem? Temporibus veniam quam saepe illo, sed voluptatem cum id, aliquam doloremque incidunt, expedita dolore consequatur nesciunt consectetur dolorem nobis minima explicabo! Facilis harum dolore quos neque labore, tempore sunt nesciunt maiores eius incidunt dignissimos quam in, dolorem perspiciatis debitis iste. Ducimus ratione modi, cupiditate voluptate enim esse ab blanditiis inventore fugiat corrupti adipisci fugit illum dolorum, mollitia quia earum! In dignissimos culpa illo animi, iure, a deleniti assumenda officiis autem facere totam veniam cum nihil ex id laborum nam. Incidunt fugit veniam qui itaque repudiandae consectetur velit facere illum reiciendis consequatur perspiciatis enim corrupti quaerat quae sint, architecto sed repellat ea, eius dolorem dolorum quisquam, minus maxime voluptate! Molestias, perspiciatis voluptatem asperiores eaque aliquid accusamus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio voluptas eaque corporis ad ipsa error. Soluta aperiam reprehenderit quo tempore. Corrupti blanditiis veniam expedita nobis, assumenda eaque ea sint beatae repudiandae sed nulla, in dolorem? Temporibus veniam quam saepe illo, sed voluptatem cum id, aliquam doloremque incidunt, expedita dolore consequatur nesciunt consectetur dolorem nobis minima explicabo! Facilis harum dolore quos neque labore, tempore sunt nesciunt maiores eius incidunt dignissimos quam in, dolorem perspiciatis debitis iste. Ducimus ratione modi, cupiditate voluptate enim esse ab blanditiis inventore fugiat corrupti adipisci fugit illum dolorum, mollitia quia earum! In dignissimos culpa illo animi, iure, a deleniti assumenda officiis autem facere totam veniam cum nihil ex id laborum nam. Incidunt fugit veniam qui itaque repudiandae consectetur velit facere illum reiciendis consequatur perspiciatis enim corrupti quaerat quae sint, architecto sed repellat ea, eius dolorem dolorum quisquam, minus maxime voluptate! Molestias, perspiciatis voluptatem asperiores eaque aliquid accusamus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio voluptas eaque corporis ad ipsa error. Soluta aperiam reprehenderit quo tempore. Corrupti blanditiis veniam expedita nobis, assumenda eaque ea sint beatae repudiandae sed nulla, in dolorem? Temporibus veniam quam saepe illo, sed voluptatem cum id, aliquam doloremque incidunt, expedita dolore consequatur nesciunt consectetur dolorem nobis minima explicabo! Facilis harum dolore quos neque labore, tempore sunt nesciunt maiores eius incidunt dignissimos quam in, dolorem perspiciatis debitis iste. Ducimus ratione modi, cupiditate voluptate enim esse ab blanditiis inventore fugiat corrupti adipisci fugit illum dolorum, mollitia quia earum! In dignissimos culpa illo animi, iure, a deleniti assumenda officiis autem facere totam veniam cum nihil ex id laborum nam. Incidunt fugit veniam qui itaque repudiandae consectetur velit facere illum reiciendis consequatur perspiciatis enim corrupti quaerat quae sint, architecto sed repellat ea, eius dolorem dolorum quisquam, minus maxime voluptate! Molestias, perspiciatis voluptatem asperiores eaque aliquid accusamus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio voluptas eaque corporis ad ipsa error. Soluta aperiam reprehenderit quo tempore. Corrupti blanditiis veniam expedita nobis, assumenda eaque ea sint beatae repudiandae sed nulla, in dolorem? Temporibus veniam quam saepe illo, sed voluptatem cum id, aliquam doloremque incidunt, expedita dolore consequatur nesciunt consectetur dolorem nobis minima explicabo! Facilis harum dolore quos neque labore, tempore sunt nesciunt maiores eius incidunt dignissimos quam in, dolorem perspiciatis debitis iste. Ducimus ratione modi, cupiditate voluptate enim esse ab blanditiis inventore fugiat corrupti adipisci fugit illum dolorum, mollitia quia earum! In dignissimos culpa illo animi, iure, a deleniti assumenda officiis autem facere totam veniam cum nihil ex id laborum nam. Incidunt fugit veniam qui itaque repudiandae consectetur velit facere illum reiciendis consequatur perspiciatis enim corrupti quaerat quae sint, architecto sed repellat ea, eius dolorem dolorum quisquam, minus maxime voluptate! Molestias, perspiciatis voluptatem asperiores eaque aliquid accusamus?</p>
</div>
</div>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
window.onscroll = function (){
if (window.scrollY > sticky) {
navbar.classList.add("sticky");
}
else {
navbar.classList.remove("sticky");
}
};
</script>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
body{
width: 100%;
height: 100vh;
}
.home{
width: 100%;
}
.home h1{
padding: 30px 0;
text-align: center;
font-size: 35px;
}
.home .navbar{
width: 100%;
height: 60px;
background: rgb(21, 89, 235);
display: flex;
align-items: center;
}
.home .navbar .links{
display: flex;
margin-left: 10px;
}
.home .navbar .links li{
display: block;
padding: 5px 15px;
}
.home .navbar .links li a{
font-size: 22px;
color: white;
}
.home .content{
width: 1200px;
margin: 0 auto;
}
.home .content p{
margin-top: 25px;
text-align: justify;
font-size: 18px;
}
.sticky{
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content{
padding-top: 60px;
}
That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
