Clever Geek Handbook

Waypoints with CoffeeScript

I want to notify an event based on a scroll. I found Waypoints

one that might solve my problem, but I get all examples with jQuery

and Reactjs

. How can I use it in CoffeeScript

?

I am using the code below. He gets fired every time, but I only want it to fire when he reaches in waypoint-header

. I have this one div

in repeat mode, I mean this one div

is available after some list items (after every 20 items in the list). Please help me to solve this problem.

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


source to share


2 answers


Here's an example in CoffeeScript without jQuery and React:

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


You don't need to add an event listener, the Waypoints library does it for you.

working code

0


source


If I understood correctly, it is okay if the current code will be fired on any scroll event. If you just need to fire the trigger when you get to waypoint-header

I think you should just create the waypoint without any scroll event as stated here

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


To notify every item inside the list, I recommend changing the id to a class and trying that.

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


source






More articles:


All Articles