Question

我在一个页面上有多个部分。每个都有一个以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});
    });

Answer 1

您已经关闭了 - 您需要为每个.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>

根据高度滚动时更改不透明度

1 个答案: