Hola, estoy usando Next12 y Bootstrap5 para mi CSS. Mi CSS funciona sin problemas en modo dev. Pero, cuando estoy ejecutando mi proyecto en modo de producción, algunos javascript no pueden ejecutarse también.

Tengo etiquetas con clases de encabezado:

 <header className="header fixed-top">

Cuando el nombre de clase de desplazamiento del sitio web debe ser:

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

Mi estilo.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); }

Mi javascript personalizado:

 /** * 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); }

Mi problema es: en desarrollo, el encabezado de clase desplazado también puede mostrarse sin recargar la página. Pero en el modo de producción, debo volver a cargar la página para que el encabezado de clase se desplace cuando me desplazo por el sitio web. ¿Alguna idea para arreglarlo?