How to convert this JQuery on scroll to Vanilla JS

Question

Here is the code:

$(document).ready(function() {
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        var navbar = $('#navbar');

        // if win >= navbar and not already a sticky
        if (windowpos >= navbar.position().top && !navbar.hasClass("navbar-fixed-top") ) {
            navbar.addClass("navbar-fixed-top");

        // if win <= navbar and is a sticky
        } else if( windowpos <= navbar.position().top && navbar.hasClass("navbar-fixed-top")  ) {
            navbar.removeClass("navbar-fixed-top");
        }
    });
});

What it does is to keep the navbar background transparent on windows onload; but makes the navbar visible with a different background color when scrolled.

Answer 1

You can use: addEventListener("scroll", callbackFunction)

Like so:

window.addEventListener("scroll", function() {
  const windowpos = document.querySelector("html").scrollTop;
  const navbar = document.querySelector("#navbar");
  const navbarTopPos = navbar.getBoundingClientRect().top;

  if (windowpos >= navbarTopPos && !navbar.classList.contains("navbar-fixed-top")) {
    navbar.classList.add("navbar-fixed-top");
  } 
  else if( windowpos <= navbarTopPos && navbar.classList.contains("navbar-fixed-top")) {
    navbar.classList.remove("navbar-fixed-top");
  }
})