Question

我有一个页面，其中包含各种高度（均相同的宽度）的div。到目前为止，我对它们所做的工作是将它们设置为在滚动时到达div的底部时粘在上面，以便下一个div似乎在向上滚动，因为前一个div保持固定。

我现在要做的是让它滚动，以便在滚动页面时上一个div逐渐消失，以便当下一个div滚动到页面顶部时，上一个div完全消失了。。同样，我想使用它，以便当您向上滚动时，上一个div逐渐淡入。

我已经在线尝试了许多解决方案，这些解决方案适用于页面上的第一个div，但之后的所有其他解决方案都无法正确淡入或淡出（或完全不淡入淡出）。

这是我到目前为止所拥有的：

let windowHeight = $(window).height();
let sections = $(".page-section");

$(window).on("scroll", function () {
        sections.each(function () {
            var bounds = this.getBoundingClientRect();

                $(this).css({
                    opacity: ($(this).height() - $(window).scrollTop()) / $(this).height()
                })

            if (bounds.bottom <= windowHeight) {
                $(this).css({
                    position: "sticky",
                    top: bounds.top
                })
            }
        })
    })

示例：https://jsfiddle.net/8Lux70bp/1/

如前所述，该方法适用于第一个div，但之后的所有其他div都有问题。我想这是因为它们的偏移量，但我不知道滚动时如何合并。

谢谢

固定后更改滚动的div的不透明度

0 个答案: