How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ? - GeeksforGeeks

09 Feb, 2022
Shrink Navigation bar works when the user scrolls down the page. In this article, we will use HTML, CSS, and JavaScript to design shrink navigation bar. HTML is used to create the structure, CSS is used to set the style on HTML structure to make it looks good. This kind of shrinking navbar looks attractive on a site. By using JavaScript you can easily make the navigation bar shrinkable when the user scrolls down.Creating Structure: In this section, we will create a basic website structure for the shrinkable navbar and when the user scrolls down the page it will display the effect. 
HTML code to create structure:
html
<!DOCTYPE html><html> <head>    <meta name="viewport" content        ="width=device-width, initial-scale=1">         <title>        How to Create Shrink Header on Scroll        using HTML, CSS and JavaScript ?    </title></head> <body>    <!-- Navlist of header -->    <div id="navlist">        <a href="#default" id="logo">            GeeksforGeeks        </a>             <div id="navlist-right">            <a href="#home">Home</a>            <a href="#about">Our Products</a>            <a href="#about">Careers</a>            <a href="#contact">Contact US</a>            <a href="#about">About US</a>        </div>    </div>     <!-- Page Content -->    <div class="content">        <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>    </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 of navigation bar and then scroll down effect on the navbar using JavaScript.
CSS code to add style on HTML structure:
CSS
<style>    * {        box-sizing: border-box;    }      body {        margin: 0;    }      /* Navlist designing */    #navlist {        overflow: hidden;        background-color: #0074D9;        padding: 90px 10px;        transition: 0.4s;        position: fixed;        width: 100%;        top: 0;        z-index: 1;    }     #navlist a {        float: left;        color: white;        text-align: center;        padding: 12px;        text-decoration: none;        font-size: 18px;        line-height: 25px;        border-radius: 4px;    }      #navlist #logo {        font-size: 35px;        font-weight: bold;        transition: 0.4s;    }      #navlist a:hover {        color: #01FE06;    }      #navlist-right {        float: right;    }          /* Content design */    .content {        margin-top:220px;        padding:15px 15px 1800px;        font-size:22px;    }</style>
JavaScript code for animation on menu:
jscript
<script>         // Scrolls down 90px from the top of    // the document, to resize the navlist    // padding and the title font-size    window.onscroll = function() {        scrollFunction()    };             function scrollFunction() {        if (document.body.scrollTop > 90 ||            document.documentElement.scrollTop > 90)        {            document.getElementById("navlist")                        .style.padding = "25px 10px";                             document.getElementById("logo")                    .style.fontSize = "24px";        }        else {            document.getElementById("navlist")                        .style.padding = "90px 10px";                                     document.getElementById("logo")                        .style.fontSize = "35px";        }    }</script>
Example: In this example, we will combine HTML, CSS and JavaScript code to make shrink header navigation-bar. 
html
<!DOCTYPE html><html> <head>    <meta name="viewport" content        ="width=device-width, initial-scale=1">         <title>        How to Create Shrink Header on Scroll        using HTML, CSS and JavaScript ?    </title>         <style>        * {            box-sizing: border-box;        }             body {            margin: 0;        }             /* Navlist designing */        #navlist {            overflow: hidden;            background-color: #0074D9;            padding: 90px 10px;            transition: 0.4s;            position: fixed;            width: 100%;            top: 0;            z-index: 1;        }             #navlist a {            float: left;            color: white;            text-align: center;            padding: 12px;            text-decoration: none;            font-size: 18px;            line-height: 25px;            border-radius: 4px;        }             #navlist #logo {            font-size: 35px;            font-weight: bold;            transition: 0.4s;        }             #navlist a:hover {            color: #01FE06;        }             #navlist-right {            float: right;        }                 /* Content design */        .content {            margin-top:220px;            padding:15px 15px 1800px;            font-size:22px;        }    </style></head> <body>     <!-- Navlist of header -->    <div id="navlist">        <a href="#default" id="logo">            GeeksforGeeks        </a>             <div id="navlist-right">            <a href="#home">Home</a>            <a href="#about">Our Products</a>            <a href="#about">Careers</a>            <a href="#contact">Contact US</a>            <a href="#about">About US</a>        </div>    </div>     <!-- Page Content -->    <div class="content">        <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>    </div>     <script>             // Scrolls down 90px from the top of        // the document, to resize the navlist        // padding and the title font-size        window.onscroll = function() {            scrollFunction()        };                 function scrollFunction() {            if (document.body.scrollTop > 90 ||                document.documentElement.scrollTop > 90)            {                document.getElementById("navlist")                            .style.padding = "25px 10px";                                 document.getElementById("logo")                            .style.fontSize = "24px";            }            else {                document.getElementById("navlist")                            .style.padding = "90px 10px";                                             document.getElementById("logo")                            .style.fontSize = "35px";            }        }    </script></body> </html>
Output: 
rkbhola5
simranarora5sos
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.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)