title: Fading <div> disappearing behind video header
body: <p>I have a video header on my site, with a scroll down button that gradually fades it's opacity from 1 to 0 as it reaches closer to its linked anchor point. The fading js itself works fine, but something is interfering with it. It has an issue where it disappears as it moves over the video header, here is the script:</p>
  <pre><code>$(document).scroll(function (e) {
      // offsetTop will be computed based on the closest relatively positioned parent element
      // since your anchor has none, his will return distance to document top
      let destination_y = $(&quot;#anchor&quot;)[0].offsetTop;
      let scrollbar_y = (window.scrollY); // top of scrollbar y position
  
      // subtract 1 to generate the css opacity level based on ratio
      let opacity = 1 - (scrollbar_y / destination_y); 
      $(&quot;.godown&quot;).css(&quot;opacity&quot;, opacity);
  });
  </code></pre>
  <p>Here's the <a href="https://codepen.io/Darlton29/pen/qBZWeKV" rel="nofollow noreferrer">codepen</a>.</p>
  <p>As you can see it immediately disappears when it moves over the video header instead of slowly fading to 0 as it should.</p>