Scroll event listener not working

Retired Boards Appdev Store Design
, , ,
1 
window.addEventListener('scroll', function () {
  var header = document.getElementsByTagName('header')[0];
  var firstSection = document.querySelector('shopify-section-sections--18210351677669__header'); // First section that determines when to change

  if (window.scrollY > firstSection.offsetHeight) {
    header.style.backgroundColor = 'black';
  } else {
    header.style.backgroundColor = '';
  }
});

I am trying to initiate this JS function on scroll which turns the background of the header into black when it passes the first section of the webpage. I have even tried using setTimeInterval to achieve the same functionality but even then the function is not run. The function is added in globals.js,

What am I missing here?

2

shopify-section-sections–18210351677669__header — Is this a class or an ID? Something appears to be missing.

window.addEventListener(‘scroll’, function () {
var header = document.getElementsByTagName(‘header’)[0];
var firstSection = document.querySelector(‘#shopify-section-sections–19481243123937__header’); // First section that determines when to change
if (window.scrollY > firstSection.offsetHeight) {
header.style.backgroundColor = ‘black’;
} else {
header.style.backgroundColor = ‘’;
}
});