淡出屏幕顶部和底部的元素

Question

我想淡出所有到达页面顶部或底部的元素。例如：https://css-tricks.com/examples/FadeOutBottom/

我想要完全相同的东西，但使用另一种方法，因为我使用身体的背景图像，所以我不能使用这种方法，因为它使用图像来淡出元素。

我也尝试过，但它对我不起作用，因为对于长文本<p>标签，不在顶部的部分也会褪色：

var elements = document.querySelectorAll( 'body *' );
$(window).scroll(function(){
$("h2").css("opacity", 1 - $(window).scrollTop() / $("h2").offset().top); 
$("p").css("opacity", 1 - $(window).scrollTop() / $("p").offset().top); 
});

我该怎么办？非常感谢。

Answer 1

您可以使用linear-gradient而不是图像来实现相同的效果：

#bottom_fade {
position: fixed;
height: 200px;
width: 100%;
bottom: 0;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0)100%);
z-index: 99;
}

如果您想开发更适合您的linear-gradient，请访问此网站：https://cssgradient.io/