Navigation bar sticks out a bit even when hidden

October 6, 2022

New coder here, im trying to create a navigation bar that gets hidden on scroll-down and pops back down when i scroll-up. I followed this video tutorial, and it works, but when the navigation bar is supposed to be hidden, theres still a bit left on the screen. Any help would be appreciated.

The issue can be recreated by scrolling up and down on the code snippet.

// JavaScript Document
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener("click", function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute("href")).scrollIntoView({
      behavior: "smooth"
    });
  });
});

@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  ;
}

.noscroll::-webkit-scrollbar {
  display: none;
}

.banner {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/home banner.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.navbar {
  width: 100%;
  margin: auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: all 300ms ease-in-out;
  background-color: red;
}

.logo {
  width: 120px;
  cursor: pointer;
  color: white;
  margin-left: 115px;
}

.logo h1 {
  text-decoration: underline;
  text-decoration-color: #B575B3;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  position: relative;
}

.navbar ul li a {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

.navbar ul li::after {
  content: '';
  height: 3px;
  width: 0;
  background: #89D7FF;
  position: absolute;
  left: 0;
  bottom: -5px;
  transition: 0.3s;
}

.navbar ul li:hover::after {
  width: 100%;
}

.scroll-down header {
  transform: translate3d(0, -100%, 0);
}

.scroll-up header {
  filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}

.banner2 {
  width: 100vw;
  height: 1000vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/1560126.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="testcss.css">

<body class="noscroll">

  <div class="banner" id="Home">
    <div class="navbar">
      <header class="navbar">
        <h1 class="logo" style="font-size: 50px; text-decoration: underline; text-decoration-color: #B575B3; ">Networks</h1>
        <ul>
          <li><a href="#Home">Home</a></li>
          <li><a href="#Networks">Networks</a></li>
          <li><a href="#Issues">Issues and Communication</a></li>
          <li><a href="#Useful">Useful Links</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </header>
    </div>
  </div>
  <div class="banner2"></div>

  <script src="main.js"></script>
  <script>
    const body = document.body;
    let lastScroll = 0;

    window.addEventListener('scroll', () => {
      const currentScroll = window.pageYOffset

      if (currentScroll <= 0) {
        body.classList.remove("scroll-up")
      }

      if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
        body.classList.remove("scroll-up")
        body.classList.add("scroll-down")
      }

      if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
        body.classList.remove("scroll-down")
        body.classList.add("scroll-up")
      }
      lastScroll = currentScroll;
    })
  </script>

</body>

</html>

>Solution :

Navbar should hide not header. Change it

.scroll-down header {
    transform: translate3d(0, -100%, 0);
}

to it

.scroll-down .navbar {
    transform: translate3d(0, -100%, 0);
}

// JavaScript Document
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener("click", function(e){
        e.preventDefault();
        document.querySelector(this.getAttribute("href")).scrollIntoView({
            behavior : "smooth"
        });
    });
});

@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;;
}


.noscroll::-webkit-scrollbar {
  display: none;
}

.banner {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url("../Images/home banner.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}   

.navbar{
    width: 100%;
    margin: auto ;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: all 300ms ease-in-out;
    background-color: red;
}

.logo {
    width: 120px;
    cursor: pointer;
    color: white;
    margin-left: 115px;
}

.logo h1 {
    text-decoration: underline;
    text-decoration-color: #B575B3;
}
.navbar ul li {
    list-style: none;
    display: inline-block;
    margin: 0 20px;
    position: relative;


}

.navbar ul li a {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
}

.navbar ul li::after{
    content: '';
    height: 3px;
    width: 0;
    background: #89D7FF;
    position: absolute;
    left: 0;
    bottom: -5px;
    transition: 0.3s;
}



.navbar ul li:hover::after {
    width: 100%;
}

.scroll-down .navbar {
    transform: translate3d(0, -100%, 0);
}

.scroll-up header {
    filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Homepage</title>
<link rel="stylesheet" href="testcss.css">

<body class="noscroll" style="height:10000px;">
        
        <div class="banner" id="Home">
            <div class="navbar">
            <header class="navbar">
            <h1 class="logo" style= "font-size: 50px; text-decoration: underline; text-decoration-color: #B575B3; ">Networks</h1>
            <ul>
                <li><a href="#Home">Home</a></li>
                <li><a href="#Networks">Networks</a></li>
                <li><a href="#Issues">Issues and Communication</a></li>
                <li><a href="#Useful">Useful Links</a></li>
                <li><a href="">Contact</a></li>
            </ul>
            </header>
        </div>
        </div>
    
    <script src="testjs.js"></script>
    <script>
        
            const body = document.body;
            let lastScroll = 0;
            
            window.addEventListener('scroll', () => {
                const currentScroll = window.pageYOffset
                
                if (currentScroll <= 0) {
                    body.classList.remove("scroll-up")
                }
                
                if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
                    body.classList.remove("scroll-up")
                    body.classList.add("scroll-down")
                }
                
                if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
                    body.classList.remove("scroll-down")
                    body.classList.add("scroll-up")
                }
                lastScroll = currentScroll;
            })
    </script>
</body>
</html>