jquery - 滚动到标题时淡出内容

Question

我有一个包含文本和透明背景的标题 div。标题的位置固定为 150 像素。我有出现在标题下方的内容 div。我想做的是淡出内容 div 的每一行，因为该行从页面顶部到达 150 像素（标题的底部）。
这样它就不会显示在标题下方。

这可能吗？

Answer 1

与您聊天后，我确定鉴于您拥有的背景，您将继续使用-webkit-mask-image. 这是一个示例，它将使用垂直不透明蒙版屏蔽页面上的所有图像。

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

---

您可以使用Gradient PNG适当CSS的 a 使其在页面顶部全宽，这会导致您出现伪淡入淡出。

您可能需要稍微调整一些 CSS 以使其达到所需的顶部高度，z-index 可能对您来说太高，但这应该可以让您很好地开始。

HTML（IMG是150px您需要创建的渐变 PNG）；

<div id="topFade">
   <img src="images/fade.png"/>
</div>

CSS

#topFade
{
   width: 100%;
   top: 0;
   position: fixed;
   height: 150px;
   float: left;
   z-index: 9998;
   margin: 0;
   padding: 0;
}
#topFade IMG
{
   width: 100%;
   height: 150px;
   margin: 0;
}

我过去在应用程序中使用过它并且效果很好。我的在底部，但顶部相同。

Answer 2

这对于非技术解决方案如何 -

不要使用部分透明的背景，而是使用部分透明的渐变。这样，在图像的顶部，背景将是纯色的（您将无法看到其后面的内容），而在底部，渐变将非常弱且透明，让您仍然可以看到内容.

当用户滚动时，这将产生淡出的效果。它也会以相反的方式工作，淡入内容。