In this post we will learn sticky navigation bar on scroll using jQuery and it’s simple and you can create easily for create this sticky navbar I use jQuery to create a this. If you want to learn this so you must read the complete post and without any delay let’s create one more think.
Important File to create this
- First create a index.html file which is you all html structure
- Next create a style.css which is design and styling you sticky navbar
- For create this I did use jQuery so you need to CDN and add below in body tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>How to create sticky navbar on scroll jquery
We are use header tag to make navigation and multi div tag which is scroll bar appear in window and design all div and give 100vh height. For header to sticky use position sticky so that navigation attach the window. here is the html code which is use in index.html file so go below and copy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky navbar on scroll jquery</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">Scroll<span>Nav</span></div>
<ul class="menu">
<li>Home</li>
<li>Service</li>
<li>Pricing</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</header>
<div class="hero">
<h1 style="color: #fff; font-size: 50px;">Hero</h1>
</div>
<div class="service">
<h1 style="color: #fff; font-size: 50px;">Service</h1>
</div>
<div class="blog">
<h1 style="color: #fff; font-size: 50px;">Blog</h1>
</div>
<div class="contact">
<h1 style="color: #fff; font-size: 50px;">Contact</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</script>
</body>
</html>
after paste html here is the style code which is css who use in style.css so here is css code use in css file
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Outfit", sans-serif;
}
body{
background: #3066fa;
}
header{
width: 100%;
margin: 0px auto;
display: flex;
justify-content: space-between;
align-items: center;
background: #eef3f7;
padding: 15px 30px;
position: sticky;
top: 0;
transition: 0.5s;
}
header.nextHead{
width: 600px;
margin: 0px auto;
border-radius: 1rem;
background: transparent;
backdrop-filter: blur(10px);
background: #ffffff63;
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.100);
top: 15px;
transition: 0.5s;
}
header.nextHead .menu li{
color: #fff;
}
.logo{
font-size: 25px;
font-weight: 900;
}
.logo span{
color: #3066fa;
}
.menu{
display: flex;
list-style: none;
gap: 20px;
}
.menu li{
font-size: 18px;
font-weight: 600;
}
.hero{
width: 100%;
height: 100vh;
background: #3066fa;
display: flex;
justify-content: center;
align-items: center;
}
.service{
width: 100%;
height: 100vh;
background: #fa3073;
display: flex;
justify-content: center;
align-items: center;
}
.blog{
width: 100%;
height: 100vh;
background: #8730fa;
display: flex;
justify-content: center;
align-items: center;
}
.contact{
width: 100%;
height: 100vh;
background: #fa7a30;
display: flex;
justify-content: center;
align-items: center;
}
It’s the simple jQuery file if you are insert this into script tag you can use it after the jQuery CDN and you can create another script file with any name and add in html after that paste below code there.
<script>
$(document).ready(function(){
$(window).scroll(function(){
var a = $(window).scrollTop()
if(a > 200){
$("header").addClass("nextHead")
}else{
$("header").removeClass("nextHead")
}
});
});
</script>