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

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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 heade -->
        <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>

    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 of navigation bar and then scroll down effect on the navbar using JavaScript.

  • CSS code to add style on HTML structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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 desing */
        .content {
            margin-top:220px;
            padding:15px 15px 1800px;
            font-size:22px;
        }
    </style>

    chevron_right

    
    

  • JavaScript code for animation on menu:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

Example: In this example, we will combine HTML, CSS and JavaScript code to make shrink header navigation-bar.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 desing */
        .content {
            margin-top:220px;
            padding:15px 15px 1800px;
            font-size:22px;
        }
    </style>
</head>
  
<body>
  
    <!-- Navlist of heade -->
    <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>

chevron_right


Output:
navigation shrink




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.