我试图在用户向下滚动时修复我的导航栏，但是当我向下滚动时它不会停留

Question

I'm trying to make it so that when the user starts scrolling, the navbar becomes fixed at the top. I'm using vanilla javascript to add my fixed navbar class dynamically on a scroll event, and when I check the devtools the class is being added, but the navbar doesn't change, so I'm assuming the issue is with my CSS. Any help is appreciated.

 const navbar = document.querySelector(".navbar"); // fixed navbar on scroll window.addEventListener("scroll", () => { if (window.scrollY > 80) { navbar.classList.add(".navbar-fixed"); } else { navbar.classList.remove(".navbar-fixed"); } });

 .navbar-fixed { position: fixed; top: 0; left: 0; width: 100%; background: white; color: black; z-index: 2; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .nav-container { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 0 30px; height: 100%; } .nav { list-style-type: none; display: flex; background: transparent; }

 <!-- NAVBAR --> <div class="bg-img"> <nav id="home" class="navbar"> <div class="nav-container"> <div class="nav-logo">Logo</div> <ul class="nav"> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#">Events</a> </li> </ul> </div> </nav> <div style="height: 1000px"></div> </div> <!-- END OF NAVBAR -->

Answer 1

Pretty close, just remove the dot when you add and remove the classList of navbar:

 const navbar = document.querySelector(".navbar"); // fixed navbar on scroll window.addEventListener("scroll", () => { if (window.scrollY > 80) { navbar.classList.add("navbar-fixed"); } else { navbar.classList.remove("navbar-fixed"); } });

Answer 2

const navbar = document.querySelector("#home");
// fixed navbar on scroll
window.addEventListener("scroll", () => {
  if (window.scrollY > 80) {
    navbar.classList.add("navbar-fixed");
  } else {
    navbar.classList.remove("navbar-fixed");
  }
  
});