Javascript 滚动时页面顶部和底部的文本淡出（使用jQuery）

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

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

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

我还需要确保整个div在到达某个点时不会褪色，它需要在上下通过视口时只是顶部的内容

这可能吗

谢谢你的帮助

编辑：更多详细信息-

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

---

在这个答案中，您可以找到一些在不透明度中使用grandient的示例，以及非常好的浏览器支持：

我希望这有帮助

-编辑：

正如问题所说，存在背景图像，因此第一种解决方案可能不合适。看看另一个似乎更合适的答案：

特别是这一行：

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

---

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

这行吗，因为我使用的是背景图像，而不是纯色背景，例如，我不能使用RGBA255255，。因为我的背景是图像而不是纯白？我添加了另一种选择，但这不是一个完美的解决方案。这似乎是一个需要SVG或canvas等额外功能的难题，所以CSS可能还不够。我猜scrollTop会提供一些方法来实现这一点，但我想不会：

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