Question

我在我的页面上使用twitter-bootstrap，我有一个视频背景。它看起来像https://jsfiddle.net/Leytgm3L/41/。当用户向下滚动时，黑色部分开始出现，并且首先将其不透明度设置为0，但是当用户继续滚动时 - 当他到达此部分的末尾时，它会变为1。我想改变它，所以当它完全出现在屏幕上时，该部分的不透明度将设置为1，因此当该组件在页面上完全可见时，用户将看到该组件的黑色背景。所以这不好：http://i.imgur.com/dBtLqpq.png，但像这样的东西是：http://imgur.com/a/elZv5 我试着去：

$("#black").css("opacity",$("body").scrollTop()/1000);

但它不起作用。你能帮帮我吗？

Answer 1

如何根据视频容器的高度检查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);
});

希望这有帮助

Answer 2

以下是一些代码，可以在用户向下滚动时更改不透明度，从文档顶部的不透明度0开始，到达元素时变为不透明度：

$("#black").css("opacity",1 -($("#black").offset().top - $("body").scrollTop()) / $("#black").offset().top);

它的工作原理是将页面上黑色元素的位置与当前滚动值进行比较。为了获得更高的性能，您可以将jQuery选择器和调用缓存到.offset。

JSFiddle：http://jsfiddle.net/Leytgm3L/45/

Answer 3

您可以根据视频的高度划分正文的scrollTop以获得您正在寻找的转换

var videoHeight = $('.video-container2 video').height();
var scrollTop = $('body').scrollTop();
var opacity = scrollTop / videoHeight;
$("#black").css("opacity", opacity);

我想在向上滚动到页面顶部时将不透明度从0更改为1

3 个答案: