Slide Down a Navigation Bar on Scroll using HTML, CSS and JavaScript

To create a slide down navigation bar 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 sliding navbar looks attractive on a site. By using JavaScript you can easily make the navigation bar slideable when the user scrolls down.

Creating Structure: In this section, we will create a basic website structure for the slide down 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>
            Slide Down a Navigation Bar on Scroll
            using HTML CSS and JavaScript
        </title>
          
        <meta name="viewport"
            content="width=device-width, initial-scale=1">
    </head>
      
    <body>
          
        <!-- logo with tag -->
        <article>
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
              
            <b>
                A Computer Science
                Portal for Geeks
            </b>
              
            <p>
                How many times were you frustrated while
                looking out for a good collection of
                programming/algorithm/interview questions?
                What did you expect and what did you get?
                This portal has been created to provide
                well written, well thought and well
                explained solutions for selected questions.
            </p>
        </article>
          
        <!-- Navbar items -->
        <div id="navlist">
            <a href="#">Home</a>
            <a href="#">About Us</a>
            <a href="#">Our Products</a>
            <a href="#">Careers</a>
            <a href="#">Contact Us</a>
        </div>
      
        <!-- for crating scroll -->
        <div class="scrollable"
            style="padding:15px 15px 4500px;">
        </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 then scroll down the effect on the navbar using JavaScript.

  • CSS code to look good the structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
           
        /* styling article tag component */
        article {
            position: fixed;
            margin-left: 10px;
        }
               
        /* styling navlist */
        #navlist {
            background-color: #0074D9;
            position: fixed;
            left: 45%;
            top: -60px;
            width: auto;
            display: block;
            transition: top 0.3s;
        }
               
        /* styling navlist anchor element */
        #navlist a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            font-size: 15px;
        }
               
        /* hover effect of navlist anchor element */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>

    chevron_right

    
    

  • JavaScript code for the animation on the menu:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
         
        // When the user scrolls down then
        // slide down the navbar
        window.onscroll = function() {
            scroll()
        };
       
        function scroll() {
            if (document.body.scrollTop > 20 ||
                    document.documentElement.scrollTop > 20) {
                document.getElementById("navlist").style.top = "0";
            }
            else {
                document.getElementById("navlist").style.top
                        = "-60px";
            }
        }
    </script>

    chevron_right

    
    

Combining the HTML, CSS, and JavaScript code: This example is the combination of the above sections.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Slide Down a Navigation Bar on Scroll
        using HTML CSS and JavaScript
    </title>
      
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
      
    <style>
      
        /* styling article tag component */
        article {
            position: fixed;
            margin-left: 10px;
        }
          
        /* styling navlist */
        #navlist {
            background-color: #0074D9;
            position: fixed;
            left: 45%;
            top: -60px;
            width: auto;
            display: block;
            transition: top 0.3s;
        }
          
        /* styling navlist anchor element */
        #navlist a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            font-size: 15px;
        }
          
        /* hover effect of navlist anchor element */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
  
<body>
      
    <!-- logo with tag -->
    <article>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <b>
            A Computer Science 
            Portal for Geeks
        </b>
          
        <p>
            How many times were you frustrated while
            looking out for a good collection of
            programming/algorithm/interview questions?
            What did you expect and what did you get?
            This portal has been created to provide
            well written, well thought and well
            explained solutions for selected questions.
        </p>
    </article>
      
    <!-- Navbar items -->
    <div id="navlist">
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Our Products</a>
        <a href="#">Careers</a>
        <a href="#">Contact Us</a>
    </div>
  
    <!-- for crating scroll -->
    <div class="scrollable"
        style="padding:15px 15px 4500px;">
    </div>
  
    <script>
      
        // When the user scrolls down then
        // slide down the navbar
        window.onscroll = function() {
            scroll()
        };
  
        function scroll() {
            if (document.body.scrollTop > 20 || 
                    document.documentElement.scrollTop > 20)
            {
                document.getElementById("navlist").style.top
                            = "0";
            }
            else {
                document.getElementById("navlist").style.top
                            = "-60px";
            }
        }
    </script>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.