Scroll event listener not working

[Ric737]

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?