没有填充的 ScrollMagic 持续时间

Question

这是我网站的大致结构：

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

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

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

事实上，当我将持续时间设置为 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 来禁用此行为并创建您正在寻找的效果。

在您的情况下，这意味着像这样添加引脚：

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

另请注意，有两种情况会默认禁用pushFollowers：

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

如需未来支持，请查看troubleshooting guide 和the github issues section。

希望对您有所帮助。 :)