CODEWITHSUNDEEP
javascripthtmljquerycssnavbar
Rishik
Rishik

Reputation: 111

Navbar is not hiding on scroll using javascript

I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.

Here's the html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>Document</title>
</head>
<body>
    <div id="navbar">
        <div id="logo">
            <a href="#">
                <h1>My logo</h1>
            </a>
        </div>
        <ul id="menu">
            <li><a class="link-button" href="#">HOME</a></li>
            <li><a class="link-button" href="#">ARTICLES</a></li>
            <li><a class="link-button" href="#">PROJECTS</a></li>
            <li><a class="link-button" href="#">AUTHOR</a></li>
            <li><a class="link-button" href="#">CONTACT</a></li>
        </ul>
    </div>

    <div id="welcome">
        <h1 id="welcome-text">My Portfolio</h1>
    </div>

    <div class="container">
    </div>

    <!-- Here script for hidding navbar on scroll down  -->

    <script>
        window.addEventListener("scroll", function(){
            let Navbar = document.getElementById('navbar');
            if(window.pageYOffset > 0){
                Navbar.classList.add("navbar-scroll");
            }else{
                Navbar.classList.remove("navbar-scroll");
            }
        });
    </script>
</body>
</html>

And here's the full css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    height: 100vh;
    perspective: 1px;
    transform-style: preserve-3d;
    overflow-x: hidden;
    overflow-y: auto;
}

html{
    overflow: hidden;
}

#navbar{
    position: sticky;
    width: 100%;
    top: 0;
    transition: background 0.5s;
    background-color: transparent;
    z-index: 2;
}

#navbar #logo{
    float: left;
    margin: 10px;
}

#navbar #logo a{
    font-size: 155%;
    color: #ffffff;
    text-decoration: none;
}

#navbar ul{
    float: right;
    justify-content: space-around;
    list-style: none;
    align-items: center;
    padding: 20px;
}

#navbar ul li{
    display: inline-block;
}

/* === Here I'm changing the display property of the navbar to none to make it disappear. === */

#navbar.navbar-scroll{
    display: none;
}

.link-button{
    display: block;
    text-align: center;
    margin: 0 15px;
    font-size: 89%;
    color: #ffffff;
    text-decoration: none;
}

.link-button::after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    margin-top: 2px;
    background: #ffffff;
    transition: width .3s;
}

.link-button:hover::after{
    width: 100%;
    transition: width .3s;
}

#welcome{
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
}

#welcome::before{
    content: "";
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: -1;
    transform: translateZ(-2px) scale(3);
}

#welcome-text{
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 26%;
    transform: translate(-50%, -50%);
    /* text-align: center; */
    font-size: 600%;
}


.container{
    background-color: #1f1f1f;
    height: 1000px;
}

In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.

If there's a better way of hiding the navbar on scroll then that's welcomed as well.

Thanks for your time.

Upvotes: 0

Views: 886

Answers (2)

josias
josias

Reputation: 1626

From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.

Something like this should work as your JavaScript:

document.body.addEventListener("scroll", function(){
  let Navbar = document.getElementById('navbar');
  if(document.body.scrollTop > 0){
    Navbar.classList.add("navbar-scroll");
  }else{
    Navbar.classList.remove("navbar-scroll");
  }
});

Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.

Upvotes: 1

SMAKSS
SMAKSS

Reputation: 10520

Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.

Upvotes: 1

Related Questions