Hide Navigation Menu on Scroll Down with CSS and JavaScript

To hide a navigation menu on scroll down with CSS and JavaScript, user should have basic knowledge of javascript conditional statement and CSS. We will be creating the navigation menu using HTML, style the navigation menu using CSS and use Javascript to hide navigation menu while scrolling down.

We are having a navigation menu with textual content, our task is to hide the navigation menu while scrolling down. In this article, we will be implementing following steps to hide a navigation menu on scroll down with CSS and JavaScript:

• 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 have used two div tags and four anchor tags in our HTML code.
• HTML div element with class nav creates structure of navigation menu having four options created using anchor tags.
• The div element with class para writes the HTML content, which upon scrolling down will hide the navigation menu.

Here is the HTML implementation of above mentioned steps:

<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 the web
        pages or specifying the presentation of a
        document written in a markup language like
        HTML.
    </p>
    <p>
        CSS helps web developers to control 
        the layout and other visual aspects of 
        the web pages.
    </p>
    <p>
        CSS stands for Cascading Style 
        Sheets, it is a simple design language 
        intended to simplify the process of making 
        web pages presentable using CSS properties.
    </p>
    <p>
        CSS specify how an HTML element should be
        displayed on the web page. If you think of
        the human body as a web page then CSS is
        styling part of the body. Like color of
        the eyes, size of the nose, skin tone, etc.
    </p>
    <p>
        This CSS tutorial is designed for aspiring 
        Web Designers and Developers from basics 
        to advance. CSS knowledge is must whoever 
        wants to be a web developer, there are a 
        lot of CSS frameworks like Bootstrap, 
        Tailwind CSS, etc. But having CSS knowledge 
        is must as a web developer.
    </p>
</div>  

Styling the Navigation Menu Using CSS

• We have used nav id to dsign the navigation menu which sets the background-color to green, fix the navigation at top using position and top property and adds a transition while hiding and showing nav menu.
• We have used #nav a selector which selects the nav menu options and sets it's font-family, we have used float which arranges the menu options horizontally from left, set the padding and font-size.
• Upon hovering over navigation menu options, we have set the text-decoration to underline.
• At the end, we have set top margin, padding, font-size and height for the written content.

Here is the CSS implementation of above mentioned steps:

#nav {
    background-color: #04af2f;
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    transition: top 0.3s;
}
#nav a {
    font-family: Verdana, sans-serif;
    float: left;
    display: block;
    color: #f2f2f2;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
}
#nav a:hover {
    text-decoration: underline;
}
.para {
    padding: 15px;
    margin-top: 30px;
    height: 1600px;
    font-size: 20px;
}

Hiding Navigation Menu Using JavaScript

• We have used two variables prevState and currentState, where prevState is the current vertical scroll position and currentState is updated as user scrolls.
• We have used event handler which executes on scrolling.
• We have used simple if-else conditional statement, where prevState > currentState represents scrolling up and prevState < currentState represents scrolling down.
• While scrolling up nav menu is set at the top using top:0;, while scrolling down nav menu is set to negative value using CSS top property which hides the navigation menu.

Here is the implementation of above mentioned steps:

let prevState = window.pageYOffset;
window.onscroll = function () {
    let currentState = window.pageYOffset;
    if (prevState > currentState) {
        document.getElementById("nav").
            style.top = "0";
    } 
    else {
        document.getElementById("nav").
            style.top = "-50px";
    }
    prevState = currentState;
}

Complete Example Code

Here is the complete example code to hide a navigation menu on scroll down with CSS and JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>
        To hide a navigation menu on scroll 
        down with CSS and JavaScript
    </title>
    <style>
        #nav {
            background-color: #04af2f;
            position: fixed;
            top: 0;
            width: 100%;
            display: block;
            transition: top 0.3s;
        }
        #nav a {
            font-family: Verdana, sans-serif;
            float: left;
            display: block;
            color: #f2f2f2;
            padding: 10px;
            font-size: 16px;
            text-decoration: none;
        }
        #nav a:hover {
            text-decoration: underline;
        }
        .para {
            padding: 15px;
            margin-top: 30px;
            height: 1600px;
            font-size: 20px;
        }
    </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">
        <p>
            CSS is the language used to design the web
            pages or specifying the presentation of a
            document written in a markup language like
            HTML.
        </p>
        <p>
            CSS helps web developers to control 
            the layout and other visual aspects of 
            the web pages.
        </p>
        <p>
            CSS stands for Cascading Style 
            Sheets, it is a simple design language 
            intended to simplify the process of making 
            web pages presentable using CSS properties.
        </p>
        <p>
            CSS specify how an HTML element should be
            displayed on the web page. If you think of
            the human body as a web page then CSS is
            styling part of the body. Like color of
            the eyes, size of the nose, skin tone, etc.
        </p>
        <p>
            This CSS tutorial is designed for aspiring 
            Web Designers and Developers from basics 
            to advance. CSS knowledge is must whoever 
            wants to be a web developer, there are a 
            lot of CSS frameworks like Bootstrap, 
            Tailwind CSS, etc. But having CSS knowledge 
            is must as a web developer.
        </p>
    </div>
    <script>
        let prevState = window.pageYOffset;
        window.onscroll = function () {
            let currentState = window.pageYOffset;
            if (prevState > currentState) {
                document.getElementById("nav").
                    style.top = "0";
            } else {
                document.getElementById("nav").
                    style.top = "-50px";
            }
            prevState = currentState;
        }
    </script>
</body>
</html>

Conclusion

In this article, we learnt and understood how to hide a navigation menu on scroll down with CSS and JavaScript. We used HTML and CSS for creating and styling the navigation menu while added scroll event listener using JavaScript which hides the navigation menu while scrolling down and reappears while scrolling up.