Question

我在页面上设置了两个容器，第一个和第二个。第二个是在第一个容器之后。

我试图编写一个jQuery函数，在到达第一个容器的末尾时，在滚动时，它会改变第二个容器的顶部位置（负顶部位置），所以感觉好像第二个容器是向上滚动并越过第一个容器。

到目前为止，我有以下内容，这是为了让我开始做一些事情。首先，在滚动时，我知道当我到达第一个容器的底部时，触发器应该开始滚动第二个容器。但是，当我滚动时，我不太确定如何让顶部位置负增加。

任何帮助？

function caseStudyScroll() {

    var secondContainerHeight = $('.second-container').height();

    $(window).scroll(function() {
        if ($(document).height() - secondContainerHeight <= ($(window).height() + $(window).scrollTop())) {
            var windowScroll = $(window).scrollTop();

        } else {

        }
    });
}
caseStudyScroll();

Answer 1

您可以在触发触发器时使用CSS过渡，而不是使用jQuery来处理滚动。当您点击触发器时，添加一个类/ ID，可以将其顶部位置更改为您需要的任何数量。在第二个容器的id /类中，输入以下内容：

-webkit-transition: top 1s;
transition: top 1s;

这将在一秒钟内将容器移动到新位置。

希望有所帮助！

编辑：现在我想到了，我可能误解了你的问题。你是否希望这种情况在滚动时不断发生？也就是说，当您滚动浏览第一个容器时，您希望第二个容器保留在页面上吗？在这种情况下，以类似方法将位置更改为固定应该有效。

在滚动上增加元素的顶部位置，直到达到高度（jQuery）

1 个答案: