Question

我有一个使用视频背景的bootstrap网页。更重要的是，我使用以下css代码：

.transparent{
    box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);
    overflow:hidden;

}

#imgBox{
    box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);

}

制作＆＃34;洞＆＃34;在覆盖层中，当用户看到图层时 - 他只看到下面的视频的一部分。这很难解释，所以请看一下这个例子：http://jsfiddle.net/Leytgm3L/31/

我想达到一个效果，绿色层一开始是透明的（让我们说它有rgba(0, 999, 0, 1)，但是当用户继续向下滚动并且这个层变得越来越明显时，它变得不那么透明（所以当它完全可见时，它应该有rgba(0,999,0,1)。如何使用jquery或css实现它？

Answer 1

我不确定您的要求，但请查看此更新的jsfiddle

刚刚在$("#black").css("opacity",$("body").scrollTop()/1000);中添加了$(window).scroll，这样会增加窗口滚动的不透明度，因为不透明度的值只能在0到1的范围内，所以我使用的数量非常少

Answer 2

你可以在JQuery中创建一个$(window).scroll函数，检测滚动方向，然后用rgba调整不透明度：

$("#greenbox").css("background-color", "rgba(0, 999, 0, "+opacity+")");