Как при скролле переводить текст заголовка в opacity?

addEventListener('scroll', e => {
  let el = document.querySelector('h1');
  el.style.opacity = Math.max(0, el.getBoundingClientRect().top/200)
})

body {
height: 2000px;
}

section {
position: absolute;
min-width: 100%;
height: 400px;
background: url(https://i.ytimg.com/vi/iqZ6anAq1kM/maxresdefault.jpg) no-repeat center bottom;
background-size: cover;
}

article {
position: relative;
text-align: center;
transform: translate(0px, -50%);
top: 50%;
}

h1 {
font-size: 30px;
font-weight: bold;
color: black;
}

h2 {
font-size: 20px;
font-weight: normal;
color: black;
line-height: 2;
}

<section>
  <article>
    <h1>Заголовок</h1>
    <h2>Описание страницы</h2>
  </article>
</section>

var $window = $(window);
var scrollFade = function($element, friction, offset) {
  friction = (friction === undefined) ? 0.5 : friction;
  offset = (offset === undefined) ? 0 : offset;

  var parentHeight = $element.parent().outerHeight() * 0.5;
  var previousOpacity = Infinity;

  $window.scroll(function() {
    var scrollTop = Math.max(0, $window.scrollTop()),
      yOffset = ($element.outerHeight() * -0.5) + scrollTop * friction,
      opacity = 1 - (scrollTop / parentHeight - (parentHeight * offset))

    if (opacity < 0 && previousOpacity < 0) return;

    $element.css({
      transform: 'translate3d(0px,' + yOffset + 'px, 0)',
      opacity: opacity
    });

    previousOpacity = opacity;
  });
}

scrollFade($('article'), 0.5, 0);

body {
  height: 2000px;
}

section {
  position: absolute;
  min-width: 100%;
  height: 500px;
  background: url(https://i.ytimg.com/vi/iqZ6anAq1kM/maxresdefault.jpg) no-repeat center bottom;
  background-size: cover;
}

article {
  position: relative;
  text-align: center;
  transform: translate(0, -50%);
  top: 30%;
}

h1 {
  font-size: 30px;
  font-weight: bold;
  color: black;
}

h2 {
  font-size: 20px;
  font-weight: normal;
  color: black;
  line-height: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <article>
    <h1>Заголовок</h1>
    <h2>Описание страницы</h2>
  </article>
</section>