In this article we’ll show you how to create Sticky Navigation Bar On Scroll Using Vanilla JavaScript. This type of Sticky Navigation Bar On Scroll is used on the websites for the webpage for Fixed Navbar On Scroll. This kind of sticky navbar looks attractive on the website.
You easily create this Sticky Navigation Bar with Scroll Using HTML, CSS & Vanilla JavaScript. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS & JavaScript then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Sticky Navigation Bar On Scroll
In this Sticky Navigation Bar, at first, on the webpage, there is Transparent Navigation Bar with a Logo left side. Bottom of the menu how banner image As you can see on the image. This form is created using only HTML & CSS and I have used some Vanilla JavaScript functions in this Sticky Navigation Bar On Scroll. If you are feeling difficult to understand then you can watch a full video tutorial on this Sticky Navigation Bar On Scroll.
Watch the video tutorial to create Sticky Navigation Bar On Scroll
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Sticky Navigation Bar On Scroll step by step completely beautifully. So you can learn how to make these Sticky Navigation Bar On Scroll. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Sticky Navigation Bar On Scroll Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Automatic Image Slider Using HTML, CSS & JS
- Neumorphism Calculator Using HTML, CSS& JS
- E-Commerce Product Card Using HTML, CSS & JS
Sticky Navigation Bar On Scroll | Source Codes
You have to create an HTML, CSS & JS File For this Sticky Navigation Bar On Scroll. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sticky Navigation</title>
<!-----Custom CSS File--->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!---Header Section--->
<div class="banner">
<nav class="header">
<a href="#" class="logo">Bindas</a>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">team</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
<div class="banner-text">
<h1>Sticky Navbar on Scroll Using Javascript</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam praesentium fuga delectus, magnam hic a minima enim repellendus omnis minus voluptatibus, vitae quo autem ut architecto quaerat recusandae alias voluptatem.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam praesentium fuga delectus, magnam hic a minima enim repellendus omnis minus voluptatibus, vitae quo autem ut architecto quaerat recusandae alias voluptatem.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam praesentium fuga delectus, magnam hic a minima enim repellendus omnis minus voluptatibus, vitae quo autem ut architecto quaerat recusandae alias voluptatem.<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam praesentium fuga delectus, magnam hic a minima enim repellendus omnis minus voluptatibus, vitae quo autem ut architecto quaerat recusandae alias voluptatem.
</p>
</div>
</div>
<!----Custom JS File--->
<script src="js.js"></script>
</body>
</html>
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700;800&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html{
scroll-behavior: smooth;
}
a{
text-decoration: none;
}
.banner{
width: 100%;
min-height: 700px;
background-image: url(img/banner.jpg);
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.banner:before{
content: "";
position: absolute;
background: rgba(7,1,90,0.6);
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
border-bottom: 1px solid rgba(235,235,235,0.5);
}
nav .logo{
font-size: 32px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
}
nav ul li a{
color: #fff;
text-transform: uppercase;
font-weight: 500;
transition: .3s;
}
nav ul li a:hover{
color: #7564e5;
}
.header.sticky{
background: #fff;
position: fixed;
width: 100%;
padding: 10px 80px;
top: 0;
transition: all 0.4s ease;
box-shadow: 0px 1px 15px rgb(0 0 0 / 10%);
z-index: 999;
}
.header.sticky .logo{
color: #7564e5;
}
.header.sticky ul li a{
color: #333;
}
.header.sticky ul li a:hover{
color: #7564e5;
}
.banner-text{
padding-top: 700px;
width: 70%;
margin: auto;
padding-bottom: 200px;
color: #fff;
}the third step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
/* scroll menu */
window.addEventListener('scroll', function(){
var header = document.querySelector('.header');
header.classList.toggle("sticky", window.scrollY > 0);
})now you’ve successfully created these Sticky Navigation Bar On Scroll. If your code does not work or facing any error/problem to comment down or contact us through the contact page.
