How to hide a navigation menu on scroll down with CSS and JavaScript?

To hide a navigation menu on scroll down with CSS and JavaScript, you should have basic knowledge of JavaScript conditional statements and CSS. We will create the navigation menu using HTML, style it with CSS, and use JavaScript to hide the navigation menu while scrolling down.

Our task is to hide the navigation menu while scrolling down and show it when scrolling up. This creates a smooth user experience by maximizing content space while keeping navigation accessible.

• Creating Structure of Navigation Menu Using HTML
• Styling the Navigation Menu Using CSS
• Hiding Navigation Menu Using JavaScript

Creating Structure of Navigation Menu Using HTML

• We use a div element with id nav to create the navigation menu structure with four anchor tags for menu options.
• The div element with class para contains the page content that will demonstrate the scroll behavior.
• The navigation menu will remain fixed at the top initially and hide/show based on scroll direction.

Here is the HTML implementation:

<div id="nav">
    <a href="#">Home</a>
    <a href="#">Tutorials</a>
    <a href="#">Tutorix</a>
    <a href="#">Contact</a>
</div>
<div class="para">
    <p>
        CSS is the language used to design web pages 
        or specify the presentation of a document 
        written in a markup language like HTML.
    </p>
    <p>
        CSS helps web developers control the layout 
        and other visual aspects of web pages.
    </p>
    <p>
        CSS stands for Cascading Style Sheets, a 
        simple design language intended to simplify 
        the process of making web pages presentable.
    </p>
    <p>
        CSS specifies how HTML elements should be 
        displayed on the web page. Think of CSS as 
        the styling part of a web page.
    </p>
    <p>
        This CSS tutorial is designed for aspiring 
        web designers and developers. CSS knowledge 
        is essential for anyone wanting to become 
        a web developer.
    </p>
</div>

Styling the Navigation Menu Using CSS

• The #nav selector styles the navigation menu with a green background-color, fixes it at the top using position: fixed, and adds a smooth transition effect.
• The #nav a selector styles menu links with float: left to arrange them horizontally, sets font-family, padding, and font-size.
• The hover effect adds text-decoration: underline for better user interaction.
• The content area has sufficient height and margin-top to demonstrate scrolling behavior.

Here is the CSS implementation:

#nav {
    background-color: #04af2f;
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    transition: top 0.3s;
    z-index: 1000;
}

#nav a {
    font-family: Verdana, sans-serif;
    float: left;
    display: block;
    color: #f2f2f2;
    padding: 15px 20px;
    font-size: 16px;
    text-decoration: none;
}

#nav a:hover {
    text-decoration: underline;
    background-color: rgba(255, 255, 255, 0.1);
}

.para {
    padding: 20px;
    margin-top: 60px;
    height: 2000px;
    font-size: 18px;
    line-height: 1.6;
}

Hiding Navigation Menu Using JavaScript

• We use two variables: prevScrollPos stores the previous scroll position, and currentScrollPos tracks the current position.
• The window.onscroll event handler executes whenever the user scrolls the page.
• We use an if-else conditional statement where prevScrollPos > currentScrollPos indicates scrolling up, and prevScrollPos indicates scrolling down.
• When scrolling up, we set top: 0 to show the menu. When scrolling down, we set top: -60px to hide it completely.

Here is the JavaScript implementation:

let prevScrollPos = window.pageYOffset;

window.onscroll = function() {
    let currentScrollPos = window.pageYOffset;
    
    if (prevScrollPos > currentScrollPos) {
        // Scrolling up - show navigation
        document.getElementById("nav").style.top = "0";
    } else {
        // Scrolling down - hide navigation
        document.getElementById("nav").style.top = "-60px";
    }
    
    prevScrollPos = currentScrollPos;
}

Complete Example

Here is the complete working example that demonstrates hiding navigation on scroll down:

<!DOCTYPE html>
<html>
<head>
    <title>Hide Navigation Menu on Scroll Down</title>
    <style>
        #nav {
            background-color: #04af2f;
            position: fixed;
            top: 0;
            width: 100%;
            display: block;
            transition: top 0.3s;
            z-index: 1000;
        }
        
        #nav a {
            font-family: Verdana, sans-serif;
            float: left;
            display: block;
            color: #f2f2f2;
            padding: 15px 20px;
            font-size: 16px;
            text-decoration: none;
        }
        
        #nav a:hover {
            text-decoration: underline;
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .para {
            padding: 20px;
            margin-top: 60px;
            height: 2000px;
            font-size: 18px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div id="nav">
        <a href="#">Home</a>
        <a href="#">Tutorials</a>
        <a href="#">Tutorix</a>
        <a href="#">Contact</a>
    </div>
    
    <div class="para">
        <h1>Scroll Down to Hide Navigation</h1>
        <p>
            CSS is the language used to design web pages 
            or specify the presentation of documents 
            written in markup languages like HTML.
        </p>
        <p>
            CSS helps web developers control the layout 
            and visual aspects of web pages effectively.
        </p>
        <p>
            When you scroll down, the navigation menu 
            will smoothly slide up and hide. When you 
            scroll back up, it will reappear.
        </p>
        <p>
            This technique is commonly used in modern 
            web design to maximize content space while 
            keeping navigation accessible.
        </p>
        <p>
            Continue scrolling to see the effect in action. 
            The transition is smooth thanks to CSS transitions.
        </p>
    </div>
    
    <script>
        let prevScrollPos = window.pageYOffset;
        
        window.onscroll = function() {
            let currentScrollPos = window.pageYOffset;
            
            if (prevScrollPos > currentScrollPos) {
                document.getElementById("nav").style.top = "0";
            } else {
                document.getElementById("nav").style.top = "-60px";
            }
            
            prevScrollPos = currentScrollPos;
        }
    </script>
</body>
</html>

Key Points

• Smooth Transition: The CSS transition: top 0.3s creates a smooth sliding effect.
• Z-index: Added z-index: 1000 to ensure navigation stays above other content.
• Scroll Detection: Comparing previous and current scroll positions determines scroll direction.
• Performance: Using window.pageYOffset is efficient for scroll position tracking.

Conclusion

This technique creates a modern, space-efficient navigation experience by hiding the menu when scrolling down and revealing it when scrolling up. The combination of CSS transitions and JavaScript scroll detection provides smooth, responsive navigation behavior that enhances user experience on content-heavy pages.