滚动时在页面顶部和底部淡出文本（使用 jQuery）答案

【问题标题】：Fade text out at top and bottom of page while scrolling (with jQuery)滚动时在页面顶部和底部淡出文本（使用 jQuery）
【发布时间】：2015-05-25 01:26:04
【问题描述】：

我正在寻找一种将不透明度/rgba 颜色应用于我页面的所有内容的方法，因为它与页面的顶部和底部有一定的距离。

这就是我想要实现的目标：

在上面的示例中，绝对定位的渐变位于底部文本上方，给人一种文本正在淡出的错觉。但是，这对我来说不是一个选项，因为我在我的页面上使用了背景图像。所以对于这个项目，我需要使用 jQuery 来淡出特定 div 中的内容，因为它越来越接近页面顶部，并且还从底部淡出。

我还需要确保整个 div 在达到某个点时不会淡出，它需要只是顶部的内容，因为它向上或向下传递视口。

这可能吗？

感谢您的帮助

编辑：更多细节 -

我有一个固定的页眉和页脚，并且希望主体内容在从底部进入视口并在顶部离开时淡出/淡入。页眉/页脚有清晰的背景，因此主体的内容不会隐藏在它们后面。

<body>
    <header>Header</header>
    <div class="main">
        Lorem ipsum dolor
    </div>
    <footer>Footer</footer>
</body>

【问题讨论】：

【解决方案1】：

在这个答案中，您可以找到一些在不透明中使用 grandient 的示例，并具有很好的浏览器支持：

我希望这会有所帮助！

-- 编辑：

正如问题所说，有一个背景图片，所以第一个解决方案可能不适合。查看其他似乎更合适的答案：

特别是这个 CSS 行：

-webkit-mask-image: -webkit-gradient(linear, left top, 
  left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

但它似乎没有完整的浏览器支持。

【讨论】：