问题描述
我在页面上使用twitter-bootstrap，并且有视频背景。 看起来像这样 。 当用户向下滚动时，黑色部分开始出现，首先将其不透明度设置为0，但是当用户继续滚动时-到达此部分末尾时，其变为1。 我要更改它，以便该部分在屏幕上完全显示时将不透明度设置为1，因此当该组件在页面上完全可见时，用户将看到该组件的黑色背景。 所以这不是很好： : ，但是类似这样的东西是： : 我尝试使用：
$("#black").css("opacity",$("body").scrollTop()/1000);
但这没用。 你能帮我吗？
1楼
Jrd
1
2015-07-30 20:31:36
如何对照视频容器的高度检查scrollTop呢？ 像这样：
$(window).scroll(function(){
$(".move").toggle($(this).scrollTop() === 0);
var videoHeight = $('.video-container2 video').height();
var scrollTop = $('body').scrollTop();
var opacity = scrollTop >= videoHeight ? 1 : 0;
$("#black").css("opacity",opacity);
});
希望这可以帮助
2楼
Maximillian Laumeister
1
已采纳
2015-07-30 20:36:50
以下是一些代码，这些代码会随着用户向下滚动而改变不透明度，从文档顶部的不透明度0开始，到到达元素时变为不透明度1：
$("#black").css("opacity",1 -($("#black").offset().top - $("body").scrollTop()) / $("#black").offset().top);
它通过将黑色元素在页面上的位置与当前滚动值进行比较来工作。
为了提高性能，您可以缓存jQuery选择器和对.offset的调用。
JSFiddle： :
3楼
TomSlick
0
2015-07-30 20:38:01
您可以将主体的scrollTop除以视频的高度，以获得所需的过渡效果
var videoHeight = $('.video-container2 video').height();
var scrollTop = $('body').scrollTop();
var opacity = scrollTop / videoHeight;
$("#black").css("opacity", opacity);