add class on scroll not working in Shopify enviroment

Question

I have this small fix in order to get my header background opaque on scroll in my Shopify webshop. While the codes works fine on codepen or likewise I can't get it working in Shopify. I've tried to set a min-height for the body to fix it, but with no luck.

Do any of you have a clue what the issue could be? You can the code implemented and not working on my site here.

Thanks a lot for helping out, hopefully, an answer can be helpful to others as well.

https://codepen.io/EliasUUUU/pen/xxzXoPv

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() }
  
})

.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;
}

<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>

Answer 1

You are trying to get stickyy-header element before the page has loaded, which means the element does not exist yet.

You need to wrap your code in window.onload event, which ensures that the element will be there.

window.onload = function() {
    alert(document.getElementById("stickyy-header"));
};

Working solution

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()
    }

  })
};

.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;
}

<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>