我在一个页面上有多个部分。每个都有一个以1
不透明度开头的叠加层。当元素的底部位于页面顶部时,我希望它在滚动时降低不透明度,达到0
。
我将此代码基于另一个问题,并且几乎适用于一个,但我想对页面上的多个元素执行此操作,这就是事情发生的地方。当我尝试它时,每个后续元素开始时不那么不透明,如果窗口大小减小则更糟。
$(window).scroll(function () {
var homeTop = $(window).scrollTop();
var height = $(window).height() / 2;
$('#splashback-home').css({
'opacity': ((height - homeTop) / height)
});
});
如何使用.splashback
类来表示任何元素?
我在想这样的事情?
$('.splashback').each(function () {
var scrollTop = $(window).scrollTop();
var thisTop = $(this).offset().top;
var thisHeight = $(this).height();
newOpacity = ???
if (newOpacity > 1) newOpacity = 1;
$(this).css({'opacity': newOpacity});
});
答案 0 :(得分:4)
您已经关闭了 - 您需要为每个.splashback
考虑元素的偏移量:
$(window).scroll(function() {
var homeTop = $(window).scrollTop();
$(".splashback").each(function() {
var height = $(this).height();
var offset = $(this).offset().top;
var opacity = (height - homeTop + offset) / height;
$(this).css("opacity", opacity);
});
});
div {
background: red;
height: 1000px;
margin-bottom: 100px;
}
.splashback {
background: lime;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Some div (will not fade)</div>
<div class="splashback">Some div splashback 1</div>
<div class="splashback">Some div splashback 2</div>
<div>Some div (will not fade)</div>