javascript - 滚动动画结合 snap.js

Question

我经常使用 wow.js 或 waypoints.js 在滚动页面时为元素设置动画。

对于当前的项目，我使用 snap.js 创建了一个菜单抽屉。使用 snap.js 时你这样划分你的页面；

    <div class="snap-drawers" id="right">
        <div class="snap-drawer-right">
            <!-- Menu drawer -->
        </div>
    </div>

    <div class="snap-content" id="content">
            <!-- Page content -->
    </div>

我可能弄错了，但我认为这两个库都不起作用的原因是因为我在#content 而不是 html, body 中滚动。我尝试操纵这些库，但效果并不理想。

我想保留 snap.js...

谁遇到过同样的问题或者谁有解决方案？提前致谢!

Answer 1

使用 Waypoints 4.0.0，我能够将 Waypoints 与 snap.js 库结合使用。

将 Waypoint 的上下文选项设置为 snap.js 内容元素。例如:

jQuery('section').waypoint({ offset: '50%', handler: waypoint_reached, context: $("#snap_content")[0] } );

waypoint_reached 是我的函数处理程序的名称，snap_content 是快照内容 DIV 的 ID。