title: Decrease opacity of content when been scrolled under fixed navbar
body: <p>So, I'm trying to make a nice transition of content from opaque to transparent under some div's (in ou case - footer and navbar) and keep their background transparent to avoid overlapping of content, as well as keeping general background of page as their background.</p>
  
  <p>For example - here's our page:
  <a href="https://i.stack.imgur.com/FRupO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FRupO.png" alt="For example - we have this"></a></p>
  
  <p>Currently, when we scroll - we have this;
  <a href="https://i.stack.imgur.com/gedpt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gedpt.png" alt="enter image description here"></a></p>
  
  <p>But i want it in the way like this:
  <a href="https://i.stack.imgur.com/kUtHA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kUtHA.png" alt="enter image description here"></a></p>
  
  <p>Take note: background of page could be a fixed gradient or wallpaper, not flat colour, and navbar/footer has no background.</p>
  
  <p>How to do this?</p>
  
  <hr>
  
  <p><strong>UPD:</strong> In order to make things clear, here's the deal</p>
  
  <p><a href="https://i.stack.imgur.com/GOqdd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GOqdd.jpg" alt="enter image description here"></a></p>
  
  <p>As you see - solutions like "header with the same BGR and 100-to-0 gradient below header" won't work in this case, because header background won't match with page background when been vertically stretched. That's why i want to make a smooth decrease of opacity under the header/footer.
  If it's at least possible to mask into the header and footer a background gradient of the same size as page's one - i welcome this. Maybe i will end up with throwing this idea away if there's no non-hardcore solution. </p>