Content fade-out on scroll

Question

I need to have page content fade OR just disappear at 100 pixels (arbitrary right now) from the top of the page as it's scrolled up. Any page content more than 100 pixels from the top shouldn't go away until it crosses that 100 pixel threshold.

I found something here that sort of works, but it fades everything at the same time, and I don't see a way to specify the threshold between visible and not visible. I'm pretty new to all this so maybe it's something simple that I'm missing.

I've tried various scripts, including modifications, but I can't seem to get it. I was going to try CSS masking, but it's not working out the way I want.

THE JAVASCRIPT

<script language="javascript">
$(document).ready(function(){
$(window).scroll(function(){
$("#hero1").css("opacity", 1 - $(window).scrollTop() / $('#hero1').height());
$("#hero2").css("opacity", 1 - $(window).scrollTop() / $('#hero2').height());
});
});
</script>

#

THE CSS

<style type="text/css">

#hero1 {
height:100px;
position:relative;
top:0px;
}

#hero2 {
height:100px;
position:relative;
top:100px;
}

</style>

#

THE HTML

<div id="hero1">
Here's some text because... why not?
<br />
<img src="this-is-a-picture.jpg" />
</div>

<div id="hero2">
And some more text.
<br />
<img src="this-is-another-picture.png" />
</div>

The above fades everything, which begins the very moment the scrolling begins rather than at a specified point down from the top of the page. What I'd like, for example, would be to start the fade at let's say 150 pixels down, with the fade completed at 100 pixels down. Everything further than 150 pixels from the top would be unaffected. If that isn't not workable, even just having content vanish once it gets to 100 pixels or whatever would work too.

Answer 1

The issue is that you're not taking into account that these "hero" elements may not in fact sitting at the top of the page. Meaning, in your calculation, you must add how far they would each be off the top edge of the scrolling element.

But this is quite an expensive approach, because even if the elements are fully scrolled out of the top of the page or way far down into the page, you are always calculating an opacity, on every scroll event, sometimes creating huge negative and positive numbers, for the elements opacity when the hero isn't even close to being at the threshold of just meeting the top edge of the scrolling element.

Either way, you could fix your example by changing where you calculate the opacity from...

1 - $(window).scrollTop() / $('#hero2').height();

to...

1 - (($(window).scrollTop() - $('#hero2').offset().top) / $('#hero2').height()))

If it were me, I would instead use a css mask for all the content to fade out on the top edge of the scrolling container. Something like this...

body {
  /* background styles that show through the scrolling elements mask */
}
.scrolling-element-inside-the-body {
  overflow-y: scroll;
  height: 100vh;
  mask: linear-gradient(to bottom, transparent, black 150px, black);
}