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

I'm using twitter-bootstrap on my page and I have a video background. It looks like this https://jsfiddle.net/Leytgm3L/41/ . When user scrolls down, the black section starts to appear and first its opacity is set to 0, but when user continue scrolling - it changes to 1 when he reach end of this section. I want to change that, so the section will have the opacity set to 1 when it fully appears on the screen, so the user will see the black background of this component when it's fully visible on the page. So this is not good: http://i.imgur.com/dBtLqpq.png , but something like this one is: http://imgur.com/a/elZv5 I tried to go with:

我在我的页面上使用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);

but it didn't work. Can you help me with that?

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

3 个解决方案

#1

Here is some code that changes the opacity as the user scrolls down, starting from opacity 0 at the top of the document, and becoming opacity 1 when they reach the element:

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

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

It works by comparing the black element's position on the page against the current scroll value. For additional performance, you could cache the jQuery selectors and the call to .offset.

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

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

#2

How about checking the scrollTop against the height of the video container? Something like this:

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

Hope this helps

希望这可以帮助

#3

You can divide the scrollTop of body by the height of the video to get the transition you're looking for

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

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

#1