javascript - add class on scroll not working in Shopify enviroment

window.onload = function() {
  let scrollpos = window.scrollY

  const header = document.getElementById("stickyy-header")
  const scrollChange = 60

  const add_class_on_scroll = () => header.classList.add("bg-white")
  const remove_class_on_scroll = () => header.classList.remove("bg-white")

  window.addEventListener('scroll', function() {
    scrollpos = window.scrollY;

    if (scrollpos >= scrollChange) {
      add_class_on_scroll()
    } else {
      remove_class_on_scroll()
    }

  })
};Copy code

.header-wrappy {
  width: 300px;
  height: 30px;
  position: fixed;
  font-size: 18px;
  color: blue;
}

#stickyy-header {
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.2s ease-in-out;
}

#stickyy-header.bg-white {
  background-color: rgba(255, 255, 255, 1) !important;
}

#stickyy-header:hover {
  background-color: rgba(255, 255, 255, 1) !important;
}Copy code

<sticky-header id="stickyy-header" class="header-wrappy">hello I am a sticky header </sticky-header>

<p style="width:300px; background:red;">
  Lorem Ipsum és un text de farciment usat per la indústria de la tipografia i la impremta. Lorem Ipsum ha estat el text estàndard de la indústria des de l'any 1500, quan un impressor desconegut va fer servir una galerada de text i la va mesclar per crear
  un llibre de mostres tipogràfiques. No només ha sobreviscut cinc segles, sinó que ha fet el salt cap a la creació de tipus de lletra electrònics, romanent essencialment sense canvis. Es va popularitzar l'any 1960 amb el llançament de fulls Letraset
  que contenien passatges de Lorem Ipsum, i més recentment amb programari d'autoedició com Aldus Pagemaker que inclou versions de Lorem Ipsum. Per què el fem servir? És un fet establert de forma evident que un lector es distraurà amb el contingut llegible
  d'una pàgina quan miri a la seva composició. El fet de fer servir Lorem Ipsum és perquè conté una distribució més o menys normal de lletres, de forma oposada a quan es fa servir "Contingut aquí, contingut aquí", aconseguint així que sembli català llegible.
  Molts paquets d'autoedició fan servir Lorem Ipsum com el seu model de text, i una cerca per "Lorem Ipsum" descobrirà molts llocs web encara a les baceroles. Diverses versions han anat evolucionant al llarg dels anys, a vegades per acident, a vegades
  a propòsit (inserint humor i coses per l'estil). D'on ve? Contràriament a la creença popular, Lorem Ipsum no és només text aleatori. Té les seves arrels en una peça clàssica de la literatura llatina del 45 aC, és a dir, de fa 2000 anys. Richard McClintock,
  un professor de llatí al Hampden-Sydney College a Virgínia, va buscar una de les paraules més estranyes del llatí, "consectetur", procedent d'un dels paràgrafs de Lorem Ipsum, i anant de citació en citació d'aquesta paraula a la literatura clàssica,
  en va descobrir l'orígen veritable. Lorem ipsum procedeix de les seccions 1.10.32 i 1.10.33 de "De Finibus Bonorum et Malorum" (Sobre el Bé i el Mal) de Ciceró, escrit l'any 45 aC. Aquest llibre és un tractat sobre la teoria de l'ètica, molt popular
  durant el Renaixement. La primera línia de Lorem Ipsum, "Lorem ipsum dolor sit amet..", prové d'una línia a la secció 1.10.32. El fragment estàndard de Lorem Ipsum fet servir des del 1500 es reprodueix a continuació per tots aquells interessats. Les
  seccions 1.10.32 i 1.10.33 de "De Finibus Bonorum et Malorum" de Ciceró es reprodueixen en la seva forma original, acompanyades de les versions angleses de la traducció de 1914 feta per H. Rackham.

</p>Copy code