Question

我需要让页面内容淡出或者随着页面向上滚动而从页面顶部消失100像素（现在是任意的）。从顶部开始超过100像素的任何页面内容都不会消失，直到超过该100像素的阈值。

我在这里找到了可以工作的东西，但是它同时使所有东西褪色，而且我看不到在可见与不可见之间指定阈值的方法。我对这一切都是新手，所以也许我很想念它。

我尝试了各种脚本，包括修改，但似乎无法理解。我本来想尝试CSS遮罩，但无法达到我想要的方式。

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>

＃

CSS

<style type="text/css">

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

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

</style>

＃

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>

上面的内容淡化了一切，一切从滚动开始的那一刻开始，而不是从页面顶部向下的指定点开始。例如，我想要的是在例如降低150像素处开始渐变，而在降低100像素时完成渐变。从顶部开始超过150像素的所有内容均不会受到影响。如果那行不通，甚至一旦内容达到100像素就消失了，或者其他任何可行的方式。

Answer 1

问题是您没有考虑到这些“英雄”元素实际上可能不在页面顶部。意思是，在计算中，必须添加它们各自离滚动元素顶部边缘的距离。

但这是一种非常昂贵的方法，因为即使元素完全从页面顶部滚动出或向下滚动到页面的深处，您始终会在每次滚动事件中计算不透明度，有时会产生巨大的负值和正数，用于当英雄甚至不接近滚动元素顶部边缘的阈值时的元素不透明度。

无论哪种方式，您都可以通过更改从...计算不透明度的位置来修正示例。

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

到...

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

如果是我，我将使用css遮罩使所有内容淡出滚动容器的顶部边缘。像这样...

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);
}

滚动内容淡出

1 个答案: