javascript - 没有填充的 ScrollMagic 持续时间

Question

这是我网站的粗略结构:

<header>
<section1>
<section2>
<section3>
<footer>

我正在使用 ScrollMagic 场景固定我的标题，直到 section2 到达窗口顶部。
为此，我将场景的持续时间设置为标题的高度 + section1 高度。

问题是 ScrollMagic 在我的标题周围创建了一个 div 元素，其填充底部恰好是该持续时间。
但我不想要那个填充。我希望标题位于第 1 节的顶部，一旦我开始滚动就好像它是固定的一样 - 但只有在我到达第 2 节之前。此时第 2 节到达窗口顶部(减去标题高度)我希望场景结束并且标题滚出。

事实上，当我将持续时间设置为 0 时，一切正常。但显然，这也让我的标题一直停留在那里，并且在我到达第 2 节后不会消失。

我希望这是可以理解的。

这是我的代码:

var controller = new ScrollMagic.Controller();

var headerscroll = $("#header").height() + $("#section1").height() ;

var headerScene = new ScrollMagic.Scene({
  pushFollowers: false,
  duration: headerscroll,
  offset: 30
})
.setPin("#header");

controller.addScene([
  headerScene
]);

Answer 1

您所描述的是 ScrollMagic 的默认固定行为，因为通常人们不希望固定元素“重叠”DOM 中跟随它的元素。

但是如果你检查 documentation for setPin您会发现，您可以使用选项 pushFollowers 来禁用此行为并创建您正在寻找的效果。

在您的情况下，这意味着像这样添加 pin:

.setPin("#header", {pushFollowers: false});

另请注意，在两种情况下 pushFollowers 默认处于禁用状态:

1. 场景的持续时间为 0。如果是，则显然没有必要向下推后续元素，因为场景永远不会结束。
2. 应该固定的元素具有 position: absolute 的 css 属性。在这种情况下，它也不会影响跟随对象的 DOM 流，并且 pushFollowers 会自动禁用。

对于 future 的支持，另请查看 troubleshooting guide和 the github issues section .

希望对您有所帮助。 :)