Trouble getting jQuery Waypoints to play well with JavaScript created content

Question

So, I've been fiddling around with jQuery Waypoints for the project I'm currently working on. I've used it the past and had no trouble but for this particular project I can't seem to get it to work. What's different this time around is that all contenet is injected with JavaScript, although that shouldn't be a problem as you use $.waypoints('refresh'); to simply update the waypoint positions.

As the content is created on the fly I've introduced a timer to make sure the content is loaded before the script is initalized.

$(document).ready(function(){

    setTimeout(function(){

        waypoints();
        $.waypoints('refresh');

    }, 2000);

});

function waypoints() {

    alert('jQuery Waypoint has initialized');
    //ep.listener.waypoints()

    $(function() {
        var $things = $('article.curr section');

        $things.waypoint(function(direction) {
          if (direction === 'down') {
            //do stuff
            console.log(this);
            console.log('down');
          }
        }, { offset: '50%' });

        $things.waypoint(function(direction) {
          if (direction === 'up') {
            //do stuff
            console.log(this);
            console.log('up');            
          }
        }, {
          offset: function() {
            return $.waypoints('viewportHeight') / 2 - $(this).outerHeight();
          }
        });

    });

}

What happens is that waypoints is fired simply one time, and one time only. It will recognize if the topmost section and nothing else unless you scroll to the bottom and refresh the page, then it'll recognize all four elements.

What am I doing wrong here?

A live demo is up HERE
Username: dev
Password: lolboy

Answer 1

You have made your body tag position:fixed and overflow:hidden, which means the scroll event is never triggered on the window, instead the scroll event is on #treats-for-trash. Waypoint listens to the scroll event on the window.

You should either change you css so that the window is scrolled instead of the article, or change the context of Waypoint to the right element, i.e. #treats-for-trash (see: http://imakewebthings.com/jquery-waypoints/#doc-options).