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

Question

I am looking for a way to apply an opacity/rgba color to all content of my page as it reaches a certain distance from the top and bottom of the page. 我正在寻找一种将不透明度/ rgba颜色应用于页面的所有内容的方法，因为它距页面顶部和底部一定距离。

This is what I want to achieve: 这是我要实现的目标：

http://www.piccante.co/images/fadeout.png http://www.piccante.co/images/fadeout.png

In the above example, an absolute-positioned gradient is above the text at the bottom, giving the illusion that the text is fading out. 在上面的示例中，绝对定位的渐变在底部的文本上方，给人以文本正在逐渐消失的错觉。 However, this is not an option for me as I am using a background image on my page. 但是，这不是我的选择，因为我在页面上使用背景图像。 So for this project, I need to use jQuery to fade out content within a specific div as it gets closer to the top of the page, and also to fade from the bottom. 因此，对于这个项目，我需要使用jQuery在特定div靠近页面顶部时淡出内容，并从底部淡出。

I also need to make sure that the entire div isn't fading out when reaching a certain point, it needs to just be the content at the top as it passes the viewport either up or down. 我还需要确保到达某个点时整个div不会褪色，当它向上或向下通过视口时，它只需要位于顶部即可。

Is this possible? 这可能吗？

thanks for the help 谢谢您的帮助

EDIT: Further details - 编辑：更多详细信息-

I have a fixed header and footer, and want to get the main body content to fade out/in as it comes up into the viewport from the bottom and leaves at the top. 我有固定的页眉和页脚，并且希望使主体内容从底部进入视口并从顶部离开时逐渐淡入/淡出。 The header/footer have clear backgrounds so the content of the main body doesn't hide behind them. 页眉/页脚具有清晰的背景，因此主体内容不会隐藏在它们的后面。

http://jsfiddle.net/3k7013q4/ http://jsfiddle.net/3k7013q4/

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

Answer 1

In this answer you can find some examples of using grandient in opacity, with a quite good browser support: 在此答案中，您可以找到一些在不透明度中使用grandient的示例，并具有相当好的浏览器支持：

https://stackoverflow.com/a/2293931/3244654 https://stackoverflow.com/a/2293931/3244654

I hope this helps! 我希望这有帮助！

-- EDIT: -编辑：

As the question says, there is a background image so the first solution is probably not suitable. 如问题所述，存在背景图像，因此第一种解决方案可能不合适。 Check out this other answer that seems to fit better: 看看其他似乎更合适的答案：

https://stackoverflow.com/a/15624692/3244654 https://stackoverflow.com/a/15624692/3244654

Specifically this CSS line: 特别是以下CSS行：

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

But it seems that it doesn't have full browser support. 但似乎它没有完全的浏览器支持。

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

问题描述

1 个解决方案

解决方案1
0 2015-03-21 19:17:10

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

问题描述

1 个解决方案

解决方案1 0 2015-03-21 19:17:10

解决方案1
0 2015-03-21 19:17:10