Sticky Navigation Bar On Scroll Using JavaScript

In this tutorial we will check how we can create sticky navigation bar using JavaScript. And the solution for this very easy using vanilla JavaScript.

Lets start with creating some HTML structure. Which have Nav followed by the list item and anchor tags.

Before going through following code check this video which have demo how sticky navigation will work

<nav>
    <a href="#" class="logo">Logo</a>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<div class="background-banner">
    <h1>Sticky Navigation Finish</h1>
</div>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Product</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h1>Sticky Navigation Finish</h1>

</div>

Create CSS file style.css and add following css in that.