Question

我想基于滚动来通知事件。我发现Waypoints可以解决我的问题，但我得到了jQuery和Reactjs的所有示例。如何在CoffeeScript中使用它？

我使用下面的代码。它每次都被解雇但我希望它只在到达waypoint-header时触发。我在重复模式下有div，我的意思是这个div在一些列表项之后可用（在列表中的每20个项之后）。请帮我解决这个问题。

$(window).scroll ->
        waypoint = new Waypoint(
            element: document.getElementById('waypoint-header'),
            handler:(direction) ->
                console.debug 'hello'
        )

Answer 1

以下是CoffeeScript中没有jQuery和React的示例：

waypoint = new Waypoint
    element: document.getElementById('waypoint-header'),
    handler: (direction) ->
        console.log 'hello'

您不需要添加事件监听器，Waypoints库本身也可以。

working codepen

Answer 2

如果我说得对，那么在任何滚动事件上触发当前代码是正常的。如果您在触及waypoint-header时需要触发一次，我猜你应该创建一个没有任何滚动事件的航点，如图所示here

waypoint = new Waypoint
      element: document.getElementById('waypoint-header'),
      handler:(direction) ->
            console.debug 'hello'

要通知列表中的每个元素，我建议将id更改为class并尝试此操作。

waypoint = $(".waypoint-header").waypoint ->
      element: document.getElementById('waypoint-header'),
      handler:(direction) ->
            console.debug 'hello'

使用CoffeeScript的航点

2 个答案: