没有填充的ScrollMagic持续时间

Question

这是我网站的粗略结构:

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

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

问题是ScrollMagic在我的标题周围创建了一个div元素,其填充底部恰好是该持续时间.
但我不想填充.我希望标题位于section1的顶部,一旦我开始滚动就好像它已被修复 - 但直到我到达第2节.此时第2节到达窗口的顶部(减去标题我希望场景结束并滚动标题.

事实上,当我将持续时间设置为0时,一切都能正常工作.但很明显,这也让我的标题始终保持在那里,一旦到达section2就不会消失.

我希望这是可以理解的.

这是我的代码:

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中的元素"重叠".

但是,如果您查看了文档setPin,您可以使用该选项pushFollowers来禁用此行为并创建您正在寻找的效果.

在你的情况下,这意味着添加这样的引脚:

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

另请注意,pushFollowers默认情况下有两种情况是禁用的:

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

有关将来的支持,请查看故障排除指南和github问题部分.

希望有所帮助.:)