CSS Class Not Added When Scrolled

[ceylonroad0403]

hi

I’m trying to change the background color of the navbar to solid color when scrolled down but it is not working.

here is my code

I have checked that the main.js is added to the bottom of the body in the script tag.

Where did I go wrong?

[richards]

Have you turned on jquery in your settings?

if you are not using jquery for anything else then you could use the following vanilla js instead:

(function () {
    "use strict"; // Start of use strict
  
    const content = document.querySelector("#mainnav");
  
    document.addEventListener("scroll", (e) => {
      var scrolled = document.scrollingElement.scrollTop;
      var position = content.offsetTop;
  
      if (scrolled > 160) {
        content.classList.add("scrolled");
      } else if (scrolled < 70) {
        content.classList.remove("scrolled");
      }
    });
  })(); // End of use strict

just add an ID of mainnav to your navbar.

You could also change the } else if (scrolled < 70) { to } else {

[ceylonroad0403]

It is working.