How to create an Affix or sticky Navbar ?

To create an affix or sticky navbar, you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, CSS will make it looks good. This kind of sticky navbar looks attractive on website. By using JavaScript, you can easily make the navigation bar sticky when the user scrolls down.

Creating Structure: In this section, we will create a basic website structure for the sticky navbar when the user scrolls down the page it will display the effect.

  • HTML code to make the structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>How To Create a Affix Navbar</title>
          
        <meta name="viewport"
            content="width=device-width, initial-scale=1">
              
            <!-- Google fonts -->
        <link href=
            rel="stylesheet">
    </head>
      
    <body>
        <div class="header">
            <img src=
        </div>
      
        <div id="navlist">
            <b>GeeksforGeeks</b>
            <a href="javascript:void(0)">Contact us</a>
            <a href="javascript:void(0)">Careers</a>
            <a href="javascript:void(0)">Our Product</a>
            <a href="javascript:void(0)">About us</a>
            <a href="javascript:void(0)">Home</a>
        </div>
      
        <div class="scrollable" 
                style="padding:15px 15px 4500px;">
              
            <b>BLACK FRIDAY</b>
              
            <p>
                Want to get huge discounts on GeeksforGeeks
                Courses? This Black Friday, we are bringing
                the shopping festival to you!!! GeeksforGeeks
                is celebrating Black Friday on 29th November
                2019 by providing you huge discounts on all
                its courses for the entire day! This will be
                a great opportunity for you to learn and
                enhance your skills. And that’s not all we
                are offering!
            </p>
              
            <p>
                There will also be Flash Sales that will go
                live for a particular duration of time where
                you can expect heavy discounts over a few 
                courses in addition to the existing discounts.
                These Flash Sales will go live for 4 times
                during the entire day with different courses
                in each flash sale. Want to know more about
                Black Friday? Read on to find out!
            </p>
              
            <p>
                Black Friday is the Friday immediately after
                Thanksgiving in the United States, which is
                on 29th November this time. This Black Friday
                Sale is intended to provide you with the best
                courses along with great deals where the
                investment of your time and money will surely
                pay off. So Grab this opportunity, Grab the
                deals and celebrate this Black Friday in the
                most amazing way possible!!!
            </p>
      
            <center>
                <h3>Black Friday Sale Highlights</h3>
            </center>
              
            <p>
                This Black Friday, GeeksforGeeks is here with
                some Red Hot new deals on online and offline
                courses. Unbelievable offers will also be back
                in Flash Sales but you need to be quick to get
                them. Here’s everything you need to know about
                the Black Friday sale by GeeksforGeeks:
            </p>
              
            <h4>All Day Super Sale On All Courses:</h4
            <p>
                There will be a Super Sale on all the available
                courses for the whole day of Black Friday. So
                you can buy your favorite courses at premium
                prices and learn a lot!
            </p>
      
            <h4>4 Flash Sales On Selected Courses:</h4
            <p>
                There will be In Between Flash Sales on different
                courses for 1 hour each on Black Friday. These
                sales will reduce the prices of already discounted
                courses even further. Stay tuned to find out the
                times for different courses on the Flash Sale!
                There are Limited seats so the discount will be
                available on First Come First Serve basis.
            </p>
              
            <h4>Social Media Contest:</h4>
            <p>
                There will also be a Social Media Contest about
                “Guessing the Price of a Course” on the Black
                Friday Sale. Try your Luck!! Hefty discounts will
                be live on the following courses for the complete
                day. Grab them and pave the way to your dream
                product-based company!
            <hr>
              
            <i>
                All the details you will get by clicking this 
                <a href=
                link</a>
            </i>
        </div
    </body>
      
    </html>

    chevron_right

    
    

Designing Structure: In the previous section, we have created the structure of the basic website. In this section, we will design the structure for the navigation bar and make the scroll down effect on the navbar using JavaScript.

  • CSS code to look good the structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        body {
            margin: 0;
        }
               
        .header {
            text-align: center;
            width: 100%;
        }
               
        #navlist {
            overflow: hidden;
            background-color: #0074D9;
        }
               
        /* navlist designing */
        #navlist a {
            float: right;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
               
        /* navlist link hover effect */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
               
        #navlist b{
            margin-top: 4px;
            padding: 8px 12px;
            color:lime;
            float: left;
            font-size: 22px;
        }
          
        /* scroll portion desing */
        .scrollable b {
            font-family: 'Special Elite', cursive;
            font-size: 28px;
        }
               
        .content {
            padding: 16px;
        }
               
        .sticky {
            position: fixed;
            top: 0;
            width: 100%;
        }
    </style>

    chevron_right

    
    

  • JavaScript code for sticky navigation bar:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        window.onscroll = function() {myFunction()};
       
        var navlist = document.getElementById("navlist");
        var sticky = navlist.offsetTop;
       
        /* Function to stick the nav bar */
        function myFunction() {
            if (window.pageYOffset >= sticky) {
                navlist.classList.add("sticky")
            
            else {
                navlist.classList.remove("sticky");
            }
        }
    </script>

    chevron_right

    
    

Combining the HTML, CSS, and JavaScript code: This example combinations the above sections to make a sticky navbar website.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   
<head>
    <title>How To Create a Affix Navbar</title>
       
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
           
        <!-- Google fonts -->
    <link href=
        rel="stylesheet">
          
    <style>
        body {
            margin: 0;
        }
          
        .header {
            text-align: center;
            width: 100%;
        }
          
        #navlist {
            overflow: hidden;
            background-color: #0074D9;
        }
          
        /* navlist designing */
        #navlist a {
            float: right;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
          
        /* navlist link hover effect */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
          
        #navlist b{
            margin-top: 4px;
            padding: 8px 12px;
            color:lime;
            float: left;
            font-size: 22px;
        }
          
        /* scroll portion desing */
        .scrollable b {
            font-family: 'Special Elite', cursive;
            font-size: 28px;
        }
          
        .content {
            padding: 16px;
        }
          
        .sticky {
            position: fixed;
            top: 0;
            width: 100%;
        }
    </style>
</head>
   
<body>
    <div class="header">
        <img src=
    </div>
   
    <div id="navlist">
        <b>GeeksforGeeks</b>
        <a href="javascript:void(0)">Contact us</a>
        <a href="javascript:void(0)">Careers</a>
        <a href="javascript:void(0)">Our Product</a>
        <a href="javascript:void(0)">About us</a>
        <a href="javascript:void(0)">Home</a>
    </div>
   
    <div class="scrollable"
            style="padding:15px 15px 4500px;">
           
        <b>BLACK FRIDAY</b>
           
        <p>
            Want to get huge discounts on GeeksforGeeks
            Courses? This Black Friday, we are bringing
            the shopping festival to you!!! GeeksforGeeks
            is celebrating Black Friday on 29th November
            2019 by providing you huge discounts on all
            its courses for the entire day! This will be
            a great opportunity for you to learn and
            enhance your skills. And that’s not all we
            are offering!
        </p>
           
        <p>
            There will also be Flash Sales that will go
            live for a particular duration of time where
            you can expect heavy discounts over a few 
            courses in addition to the existing discounts.
            These Flash Sales will go live for 4 times
            during the entire day with different courses
            in each flash sale. Want to know more about
            Black Friday? Read on to find out!
        </p>
           
        <p>
            Black Friday is the Friday immediately after
            Thanksgiving in the United States, which is
            on 29th November this time. This Black Friday
            Sale is intended to provide you with the best
            courses along with great deals where the
            investment of your time and money will surely
            pay off. So Grab this opportunity, Grab the
            deals and celebrate this Black Friday in the
            most amazing way possible!!!
        </p>
   
        <center>
            <h3>Black Friday Sale Highlights</h3>
        </center>
           
        <p>
            This Black Friday, GeeksforGeeks is here with
            some Red Hot new deals on online and offline
            courses. Unbelievable offers will also be back
            in Flash Sales but you need to be quick to get
            them. Here’s everything you need to know about
            the Black Friday sale by GeeksforGeeks:
        </p>
           
        <h4>All Day Super Sale On All Courses:</h4
        <p>
            There will be a Super Sale on all the available
            courses for the whole day of Black Friday. So
            you can buy your favorite courses at premium
            prices and learn a lot!
        </p>
   
        <h4>4 Flash Sales On Selected Courses:</h4
        <p>
            There will be In Between Flash Sales on different
            courses for 1 hour each on Black Friday. These
            sales will reduce the prices of already discounted
            courses even further. Stay tuned to find out the
            times for different courses on the Flash Sale!
            There are Limited seats so the discount will be
            available on First Come First Serve basis.
        </p>
           
        <h4>Social Media Contest:</h4>
        <p>
            There will also be a Social Media Contest about
            “Guessing the Price of a Course” on the Black
            Friday Sale. Try your Luck!! Hefty discounts will
            be live on the following courses for the complete
            day. Grab them and pave the way to your dream
            product-based company!
        <hr>
           
        <i>
            All the details you will get by clicking this 
            <a href=
            link</a>
        </i>
    </div
      
    <script>
        window.onscroll = function() {myFunction()};
  
        var navlist = document.getElementById("navlist");
        var sticky = navlist.offsetTop;
  
        /* Function to stick the nav bar */
        function myFunction() {
            if (window.pageYOffset >= sticky) {
                navlist.classList.add("sticky")
            
            else {
                navlist.classList.remove("sticky");
            }
        }
    </script>
</body>
   
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up