Как изменить непрозрачность свойства css при прокрутке вниз?

Question

Я использую shopify для создания своего интернет-магазина и пытаюсь изменить непрозрачность моего заголовка при прокрутке вниз, когда я использую следующий код (жестко запрограммированный), мой заголовок получает непрозрачность 0,5:

@media (min-width: 1200px) {
.header-section {
    position: sticky;
    z-index: 1000;
    top: 0;
    background: #fff;
    transition: all .3s;
    opacity: 0.5;
}

Но когда я пробую следующий код на javascriptm, он не работает:

  //Change opacity
  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('header').outerHeight();

  $(window).scroll(function(event){
      didScroll = true;
  });

  setInterval(function() {
      if (didScroll) {
          hasScrolled();
          didScroll = false;
      }
  }, 250);


  function hasScrolled() {

      var st = $(this).scrollTop();

      // Make sure they scroll more than delta
      if(Math.abs(lastScrollTop - st) <= delta)
          return;

      // If they scrolled down and are past the navbar, add class .nav-up.
      // This is necessary so you never see what is "behind" the navbar.
      if (st > lastScrollTop && st > navbarHeight){
          // Scroll Down
          $('.header-section').css("opacity", "0.5");
      } else {
          // Scroll Up
          if(st + $(window).height() < $(document).height()) {
          $('.header-section').css("opacity", "0.5");
          }
      }

      lastScrollTop = st;
  }

Я не могу найти, что я делаю неправильно, кто-нибудь видит мою ошибку?

Заранее спасибо!