Question 184322 in CSS Question posted in
Some basic documentation can be found here.

Css – classList and window.onscroll issue

I’m learning html, css and js and I’m trying to make a sticky navbar, so that when I scroll down the page, the navbar sticks at the top.

At first, using this code worked:

html:

<div class="navBarContainer" id="navbar">
   <a class="navBar" href="index.html">Home</a>
   <a class="navBar" href="contacts.html">Contattaci</a>
   <a class="navBar">La storia</a>
   <a class="navBar" href="gallery.html">Gallery</a>
   <a class="navBar">Eventi</a>
   <select id="brancaDropdown" onchange = "onChange()">
       <option value="lupetti" id="option" selected>Lupetti</option>
       <option value="reparto" id="option">Reparto</option>
       <option value="clan" id="option">Clan</option>
    </select>
</div>

CSS:

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

js:

let navBar = document.getElementById("navbar");
let navBarOffset = navBar.offsetTop;
window.onscroll = stickScrollbar();
function stickScrollbar() {
    if (window.pageYOffset >= navBarOffset) {
        navBar.classList.add("sticky");
    } else {
        navBar.classList.remove("sticky");
    }
}

then, the next day, I figured out that it wasn’t working anymore. Window.onscroll wasn’t firing (I made the function call an alert), so I tried to bind the "onscroll" to the body, and it fires, but I still don’t know why window.onscroll isn’t fine. Anyways, I thought the problem was solved, but classList.add()/remove() wasn’t working. Instead of scrolling, I tried to make the class change by the click of a button, same result. So I tried with onload, using the body element, but it didn’t work as well. I’m using Chrome.
Please help, this is driving me mad.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    OK guys thanks all, I solved it, it was just a previus variable wrong declaired that caused an exeption, but because I'm working with visual studio code I wasn't notified. I declaired: const calendar = getElementById("calendar") without writing "document.".


  2. 0

    Try This:

    let navBar = document.getElementById("navbar");
let navBarOffset = navBar.offsetTop;

window.onscroll = function stickScrollbar(){
    if (window.pageYOffset >= navBarOffset) {
        navBar.classList.add("sticky");
    } else {
        navBar.classList.remove("sticky");
    }
}
    .sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.container{
  background-color:red;
  height: 150vh;
}
    <div class="container">
    <div class="navBarContainer" id="navbar">
       <a class="navBar" href="index.html">Home</a>
       <a class="navBar" href="contacts.html">Contattaci</a>
       <a class="navBar">La storia</a>
       <a class="navBar" href="gallery.html">Gallery</a>
       <a class="navBar">Eventi</a>
       <select id="brancaDropdown" onchange = "onChange()">
           <option value="lupetti" id="option" selected>Lupetti</option>
           <option value="reparto" id="option">Reparto</option>
           <option value="clan" id="option">Clan</option>
        </select>
    </div>
  </div>
    Login or Signup to reply.
  3. 0

    According to your Question
    You need stick the navbar on top, No need to use javascript

    If you want to stick navbar on the top just fix this css :

    .sticky {
    position: sticky;
    top: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search