How to Hide a Menu on Scroll Using HTML, CSS, and JavaScript

Introduction

In some user interface designs, hiding the navigation menu when the user scrolls down and revealing it when scrolling up can enhance the user experience by maximizing the viewport area for content. This tutorial will show you how to create a navigation menu that hides when the user scrolls down and reappears when scrolling up.

Development Steps

Create the HTML Structure: Construct the basic structure for the navigation menu.
Style the Menu Using CSS: Apply styles to make the menu visually appealing.
Implement JavaScript Logic: Add JavaScript to handle the show/hide behavior based on scroll direction.

Step 1: Create the HTML Structure

First, we’ll set up the HTML for the navigation menu. The menu will include a few basic links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Menu on Scroll</title>
</head>
<body>

    <!-- Navigation Menu -->
    <div id="navbar" class="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>

    <!-- Content to demonstrate scrolling -->
    <div class="content">
        <h1>Scroll Down and Up to See the Navbar Effect</h1>
        <p>Content goes here...</p>
        <p style="height: 800px;"></p> <!-- Just to make the page scrollable -->
    </div>

</body>
</html>

Now, we'll style the navigation menu. We will make it fixed at the top of the page so that it can hide or show based on the scroll.

<style>
    body, html {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
    }

    .navbar {
        background-color: #333;
        position: fixed;
        width: 100%;
        top: 0;
        overflow: hidden;
        display: flex;
        justify-content: space-around;
        transition: top 0.3s; /* Smooth transition for hiding and showing the menu */
    }

    .navbar a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .navbar a:hover {
        background-color: #ddd;
        color: black;
    }

    .content {
        padding: 20px;
        margin-top: 50px; /* Give some space from the top for the content */
    }
</style>

Step 3: Implement JavaScript Logic

We will use JavaScript to determine the direction of the scroll. If the user is scrolling down, the menu will hide by moving it above the viewport. If scrolling up, it will appear again.

<script>
    let lastScrollTop = 0; // Variable to store the last scroll position
    const navbar = document.getElementById('navbar');

    window.addEventListener('scroll', function() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > lastScrollTop) {
            // Scrolling down
            navbar.style.top = "-50px"; // Adjust this value based on the actual height of your navbar
        } else {
            // Scrolling up
            navbar.style.top = "0";
        }
        lastScrollTop = scrollTop;
    });
</script>

Explanation:

We track the last scroll position with lastScrollTop.
On scroll, we check if the current scroll position is greater than lastScrollTop. If it is, the user is scrolling down, and we hide the navbar. If not, the user is scrolling up, and we show the navbar.
We update lastScrollTop at the end of the function to the current scroll position for the next scroll event.

Complete Code

Here’s the full HTML document including HTML, CSS, and JavaScript for the hide/show navigation menu based on scroll direction:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Menu on Scroll</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .navbar {
            background-color: #333;
            position: fixed;
            width: 100%;
            top: 0;
            overflow: hidden;
            display: flex;
            justify-content: space-around;
            transition: top 0.3s;
        }

        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        .content {
            padding: 20px;
            margin-top: 50px;
        }
    </style>
</head>
<body>

    <div id="navbar" class="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>

    <div class="content">
        <h1>Scroll Down and Up to See the Navbar Effect</h1>
        <p>Content goes here...</p>
        <p style="height: 800px;"></p>
    </div>

    <script>
        let lastScrollTop = 0;
        const navbar = document.getElementById('navbar');

        window.addEventListener('scroll', function() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            if (scrollTop > lastScrollTop) {
                navbar.style.top = "-50px";
            } else {
                navbar.style.top = "0";
            }
            lastScrollTop = scrollTop;
        });
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

This tutorial demonstrated how to create a navigation menu that hides when scrolling down and reappears when scrolling up. This behavior maximizes content visibility and enhances user experience, particularly on devices where screen space is limited.

Java Guides

Search This Blog