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

Last Updated : 26 Jul, 2024

The Shrink Navigation bar works when the user scrolls down the page. In this article, we will use HTML, CSS, and JavaScript to design a shrink navigation bar. HTML is used to create the structure, and CSS is used to set the style of the 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 the HTML 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.

Designing Structure: In CSS and JavaScript section, we will design the structure of the navigation bar and then the scroll-down effect on the navbar using JavaScript.

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>

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

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