jQuery and CSS Fixed Top Menu on Scroll with Animated Demo

How to create a fixed menu on the scroll?

In this tutorial, a jQuery and CSS-based menu is shared that will be fixed on top as you scroll down the page.

That way, your main content appears on the top with the menu bar afterward. When the user scrolls down the page and passes the main content, the menu bar fixes on top.

In the next section, you can see a live demo of the fixed menu which is based on jQuery and CSS.

A demo of the fixed menu on top

See the demo below via animated Gif.

You may change the look and feel of the menu by accessing and changing the properties in the fixed-menu class (placed under the style section of the code below).

In the jQuery code, the addClass and removeClass class methods are used to add and remove this class on the scroll.

These methods are associated with the <nav> tag on the web page.

Have a look:

Complete code including CSS, HTML, and jQuery:

<!doctype html>
<html>
<head>
<style>
* {margin: 0; padding: 0;}

a {text-decoration: none;}

/* This class is added on scroll */
.fixed-menu {
    position: fixed;
    top: 0;
    height: 60px;
    z-index: 1;
    background-color: #B6DADA !important;
}

body {
    color: #fff;
    font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
    font-size: 18px;
    text-align: center;
}

/* Navigation Settings */
nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #CFCFCF;
}

nav li {
    display: inline-block;
    padding: 24px 10px;
}

nav li a {
    color: #9398AE;
}

section {
    height: 100vh;
}

/* Content for demo */
#content1 {
    background: #60C4AF;
}

#content1 p {
    padding-top: 200px;
}

#content2 {
    background: #EBBD21;
}

#content2 p {
    padding-top: 100px;
    color:green;
}

#content3 {
    background: #E89766;
}

@media only screen and (max-width: 520px) {

    nav li {
        padding: 24px 4px;
    }

    nav li a {
        font-size: 14px;
    }

}
</style>
</head>

<body>
<section id="content1">

    <p>Scroll down</p>

<nav>
 <ul>
   <li><a href="https://www.jquery-az.com/">Home</a></li>
         	  <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li>
         	  <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li>
         	  <li><a href="https://www.jquery-az.com/css-tutorials/">CSS</a></li>
         	  <li><a href="https://www.jquery-az.com/angularjs-tutorials/">Angular JS</a></li>
              <li><a href="https://www.jquery-az.com/javascript-tutorials/">JavaScript</a></li>
 </ul>
</nav>

</section>

<section id="content2">
<p>A demo of fixed nav bar on scroll</p>
</section>
    
<section id="content3"></section>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
   $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - 60;
             if ($(window).scrollTop() > navHeight) {
                 $('nav').addClass('fixed-menu');
             }
             else {
                 $('nav').removeClass('fixed-menu');
             }
        });
    });
</script>

</body>
</html>

This is how it worked:

As the web page loads, the .nav CSS class will apply to the menu bar.
You may change the properties there like the background color of the navigation bar, font weight, font- family, size, color of text, etc.
Find these classes under the style tag for changing the look of the menu bar as the web page loads:

nav, nav li, nav li a

As mentioned earlier, as the page is scrolled down and up, the addClass and removeClass methods are used to attach and remove the fixed-menu CSS class.

Setting up this menu on your website

As such, this fixed solution is based on jQuery, so you have to include the jQuery library from CDN or host on your own.

No other dependency.

Simply use the style and adjust the markup according to the design or layout of your website!

Credit: atelierbram

How to create a fixed menu on the scroll?

A demo of the fixed menu on top

Setting up this menu on your website

Learn More: