Hi I'm using Next12 and Bootstrap5 for my CSS. My CSS running smoothly in dev mode. But, when I am running my project into production mode, some javascript can't running as well.

I have tags with header classes :

<header className="header fixed-top">

When the website scrolling className must be :

<header className="header fixed-top header-scrolled">

My style.css :

.header {
  transition: all 0.5s;
  z-index: 997;
  padding: 20px 0;
}
.header.header-scrolled {
  background: #fff;
  padding: 15px 0;
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}

My custom javascript :

  /**
   * Scrolls to an element with header offset
   */
  const scrollto = (el) => {
    let header = select("#header");
    let offset = header.offsetHeight;

    if (!header.classList.contains("header-scrolled")) {
      offset -= 10;
    }

    let elementPos = select(el).offsetTop;
    window.scrollTo({
      top: elementPos - offset,
      behavior: "smooth",
    });
  };

  /**
   * Toggle .header-scrolled class to #header when page is scrolled
   */
  let selectHeader = select("#header");
  if (selectHeader) {
    const headerScrolled = () => {
      if (window.scrollY > 100) {
        selectHeader.classList.add("header-scrolled");
      } else {
        selectHeader.classList.remove("header-scrolled");
      }
    };
    window.addEventListener("DOMContentLoaded", headerScrolled);
    onscroll(document, headerScrolled);
  }

My problem is : In dev, class header-scrolled can showing as well without reload the page. But in production mode, I must reload the page to get class header-scrolled when I scroll the website. Any idea to fix it?