结合 snap.js 的滚动动画答案

【问题标题】：Animations on scroll in combination with snap.js结合 snap.js 的滚动动画
【发布时间】：2015-05-07 09:40:00
【问题描述】：

我经常使用 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...

是否有人遇到过同样的问题或可能有解决方案的人？提前致谢！

【问题讨论】：

任何重现您的问题的示例代码？ JSFiddle？

标签： javascript jquery html snap.js

【解决方案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。

【讨论】：