Question

我是ScrollMagic的新手，所以不确定是否有一些我忽略的东西。

我已经设置了一个codepen来说明我想要实现的目标，并且alternative version 几乎做了我想做的事情，除了存在巨大的差距我似乎无法摆脱它。

基本上希望将3张幻灯片叠放在一起。当用户滚动时，幻灯片一个接一个地向上转换以显示下面的那个。

当滚动浏览最终幻灯片时，页面上的剩余内容应向上滚动，就好像它已附加到最终幻灯片的底部一样，从那时起应该像普通页面一样。

目前，包含所有幻灯片的容器透明地覆盖了其他正文内容，直到最终幻灯片从视口顶部消失，而ScrollMagic正在这样做。

codepen中的粉红色条旨在显示幻灯片容器底部的完成位置。

以下是相关代码：

readingDumpTask = new Task(() =>
{
    this.myDumpEntries = BiteDump.GetEntriesFromFile(fileName);
});

Answer 1

这是默认设计用于停止固定元素与文档中的以下元素重叠。

您需要设置＆＃39; pushFollowers＆＃39;属性为false：

function initScene() {
    scene = new ScrollMagic.Scene({
        triggerElement: ui.el,
        duration: '100%'
    })
    .setTween(wipeAnimation)
    .setPin(ui.el, {
        pushFollowers: false
    })
    .addTo(controller);
}

请参阅文档：http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.Scene.html#setPin

// pin element and push all following elements down by the amount of the pin duration.
scene.setPin("#pin");

// pin element and keeping all following elements in their place. The pinned element will move past them.
scene.setPin("#pin", {pushFollowers: false});

工作示例：https://codepen.io/alexgill/pen/MyOMKP（从您的代码中分叉）

ScrollMagic pin spacer太大

1 个答案: