4

这是我网站的大致结构：

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

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

问题是 ScrollMagic 在我的标题周围创建了一个 div 元素，其填充底部正好是该持续时间。
但我不想要那个填充。我希望标题位于第 1 部分的顶部，一旦我开始滚动，就好像它是固定的一样 - 但直到我到达第 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
]);
4

1 回答 1

9

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

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

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

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

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

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

如需未来支持，还请查看故障排除指南和github 问题部分。

希望有帮助。:)

于 2015-03-27T10:50:03.927 回答