Search code examples
javascriptjqueryjquery-waypoints

Jquery Waypoint with nested div not working

Here is the Fiddle

I'm trying to get Waypoint working in a nested div but unable to do so.

I've outer div with fixed height. Inside that div, I have an inner div and an Waypoint div. Please find below the code.

Html

<div style="background:grey;height:300px;overflow:auto;">
    <div style="height:900px;background:#F5F6CE;"></div>
    <div id="waypoint" style="background:#B45F04;">Waypoint</div>    
</div>

Script

$('#waypoint').waypoint(function() {
    console.log('Reached waypoint.');
}, {
    offset: 'bottom-in-view'
});

The text Reached waypoint. is never printed in the console. Any pointers.?

Edit: Updated the Fiddle.

Solution

  • The plugin documentation suggests that the default "viewport" (as it calls it) is the window object:

    $.fn.waypoint.defaults = {
  context: window,
  ...

    JSFiddle, however, pads the parent iframe; that's why you never technically "align" your waypoint with the viewport (window). Add a custom context in your waypoint's options, e.g.:

    context: $("#waypoint").parent()

    Fiddle: http://jsfiddle.net/utTU4/