classList and window.onscroll issue

Question

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.

Answer 1

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.".