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

使用Waypoint 4.0.0，我可以将waypoint与snap.js库结合使用。

将Waypoint的上下文选项设置为snap.js内容元素。举个例子：

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

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

滚动动画与snap.js结合使用

1 个答案: