How do I get Waypoints (Jquery plugin) to work for infinite scroll in the following case?

Question

I am using the Waypoints Jquery plugin: http://imakewebthings.github.com/jquery-waypoints/#documentation

My issue is that I want to load content dynamically when the waypoint is reached. Initially, content is loaded dynamically, then I want the waypoint at the end... when the waypoint is reached, I want to load more content in front of it, etc.

Structure:

<div class="viewport">
  <div class="viewport-content">
    <div id="messages">
      /* {messages loaded here} */
    </div>
    /* #waypoint added after messages loaded via appendTo('.viewport-content') */
    <div id="waypoint"></div> 
  </div>
</div>

The viewport/viewport-content form the scrollable region via css. I was using the appendTo to append the waypoint after the initial messages had loaded, otherwise the waypoint was at the top and was hit. However, when I use the appendTo after loading the initial messages, when I scroll down, I can't get it to work properly.

Here is my current JS in regards to the waypoint:

var opts = {
    offset: 'bottom-in-view',
    context: '#central-pane .viewport-content',
};

$('#waypoint').waypoint(function(event, direction) {
    alert("You've hit my waypoint! ow!");
    $('#messages').append($loading);
    messagesLoad(); /* loads more messages via appendTo('#messages') */
    $('#waypoint').waypoint(opts);
}, opts);

Any ideas on how I can get this to work?

Answer 1

That's what I did on my page:

var opts = {
    offset: '110%',
    context: '#central-pane .viewport-content'
};

$('#waypoint').waypoint(function(event, direction) {
    alert("You've hit my waypoint! ow!");
    $('#messages').append($loading);
    if(direction === 'down') {
        messagesLoad(); /* loads more messages via appendTo('#messages') */
    }
    $.waypoints('refresh');
}, opts);

I used 110% to trigger loading before the bottom is reached and checked if the direction is down.

Answer 2

Why don't you just attach the waypoint to the ".viewport-content" and keep the "bottom-in-view" option. That way when the content gets loaded it pushes the bottom out of view and when you scroll down more it will fire the event again when the bottom is back in view.