Return to Answer

So, you having an error in your code, if user Scroll the page navbar was not fixed to top of the page, I will give you an example with the source code. Let's try the below code.

Source Code : Sticky Navbar

HTML

 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>

CSS

.sticky {
 position: fixed;
 top: 0;
 width: 100%;
 left: 0;
 right: 0;
}
.sticky + .content {
 padding-top: 60px;
}

Use This JavaScript code. This code will work when the user scrolls the page 300px from the top, the navbar will stick to the page.

window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
 if (window.scrollY > 300) {
 if (window.pageYOffset >= sticky) {
 navbar.classList.add("sticky")
 } else {
 navbar.classList.remove("sticky");
 }
 }else{
 navbar.classList.remove("sticky");
 }
}

This will help you to create a sticky navbar.

You have an error in your code: if the user scrolls, the page navbar is not fixed to top of the page.

I will give you an example with the source code. Let's try the below code.

Source Code : Sticky Navbar

HTML

 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>

CSS

.sticky {
 position: fixed;
 top: 0;
 width: 100%;
 left: 0;
 right: 0;
}
.sticky + .content {
 padding-top: 60px;
}

Use this JavaScript code. This code will work when the user scrolls the page 300px from the top; the navbar will stick to the page.

window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
 if (window.scrollY > 300) {
 if (window.pageYOffset >= sticky) {
 navbar.classList.add("sticky")
 } else {
 navbar.classList.remove("sticky");
 }
 }else{
 navbar.classList.remove("sticky");
 }
}

This will help you to create a sticky navbar.

So, you want to create a navigation bar fixed or sticky on Scroll, Ok it's not that much hard. I will give you an example with the source code. Let's try the below code.

First, you have to understand what a sticky navbar is.

A sticky navbar is a popular design element used in website for User interface. By keeping the navigation bar "sticky," or fixed to the top of the webpage, it remains visible as the user scrolls down, making it easier to navigate through the website.

Source Code : Sticky Navbar

Example: 1] Use HTML

 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
</nav>

2] Use Css

nav {
 top: 0;
 width: 100%;
 background-color: #333;
 color: #fff;
 padding: 20px;
}
nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: space-between;
}
nav ul li {
 margin: 0 10px;
}
nav ul li a {
 color: #fff;
 text-decoration: none;
}
.sticky {
 position: fixed;
 top: 0;
 width: 100%;
 left: 0;
 right: 0;
}
.sticky + .content {
 padding-top: 60px;
}

3] Use JavaScript

window.onscroll = function() {myFunction()};
var navbar = document.querySelector("nav");
var sticky = navbar.offsetTop;
function myFunction() {
 if (window.pageYOffset >= sticky) {
 navbar.classList.add("sticky")
 } else {
 navbar.classList.remove("sticky");
 }
}

This will help you to create a sticky navbar.

So, you having an error in your code, if user Scroll the page navbar was not fixed to top of the page, I will give you an example with the source code. Let's try the below code.

Source Code : Sticky Navbar

HTML

 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
</nav>

CSS

.sticky {
 position: fixed;
 top: 0;
 width: 100%;
 left: 0;
 right: 0;
}
.sticky + .content {
 padding-top: 60px;
}

Use This JavaScript code. This code will work when the user scrolls the page 300px from the top, the navbar will stick to the page.

window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
 if (window.scrollY > 300) {
 if (window.pageYOffset >= sticky) {
 navbar.classList.add("sticky")
 } else {
  navbar.classList.remove("sticky");
 }
 }else{
 navbar.classList.remove("sticky");
 }
}

This will help you to create a sticky navbar.