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

27 Sep, 2021
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: 
HTML
<!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 creating scroll -->    <div class="scrollable"        style="padding:15px 15px 4500px;">    </div></body> </html>
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: 
CSS
<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>
JavaScript code for the animation on the menu: 
JavaScript
<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>
Combining the HTML, CSS, and JavaScript code: This example is the combination of the above sections. 
HTML
<!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 creating 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>
Output: 
 
arorakashish0911
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?