没有填充的 ScrollMagic 持续时间

Question

这是我网站的大致结构：

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

我正在使用 ScrollMagic 场景固定我的 header，直到第 2 部分到达 window 的顶部。
为此，我将场景的持续时间设置为 header 的高度 + section1 高度。

问题是 ScrollMagic 在我的 header 周围创建了一个 div 元素，其 padding-bottom 正好是那个持续时间。
但我不想要那个填充。我希望 header 位于 section1 的顶部，一旦我开始滚动就好像它是固定的一样 - 但直到我到达第 2 部分。此时第 2 部分到达 window（减去 header 高度）我希望场景结束并且 header 滚出。

事实上，当我将持续时间设置为 0 时，一切正常。但显然，这也让我的 header 一直呆在那里，一旦我到达第 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 的默认固定行为，因为通常人们不希望固定元素到 "overlap" DOM 中它后面的元素。

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

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

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

另请注意，默认情况下 pushFollowers 处于禁用状态的情况有两种：

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

对于未来的支持，另请查看 troubleshooting guide and the github issues section。

希望对您有所帮助。 :)

没有填充的 ScrollMagic 持续时间

ScrollMagic duration without padding

html

javascript

css

jquery

scrollmagic