Increase background opacity on scroll

by Michael Myers

HTML

<header>
  <div class='header-overlay'>

  </div>
</header>

CSS

header {
  position: relative;
  height: 2000px;
  width: 100%;
  background: center center;
  background-size: cover;
  background-image: url(https://cdn.shopify.com/s/files/1/0633/6371/1214/files/story-bg.jpg?v=1654594192);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2000px;
  background: rgb(75, 0, 255);
  opacity: 0.2;
}

JavaScript

$(window).scroll(function() {
  let scrollTop = $(this).scrollTop();

  $('.header-overlay').css({
    opacity: function() {
      let elementHeight = $(this).height(),
          opacity = ((1 - (elementHeight - scrollTop) / elementHeight) * 0.3) + 0.2;
          
      return opacity;
    }
  });
});