CODEWITHSUNDEEP
javascriptjqueryjquery-waypoints
Java_User
Java_User

Reputation: 1321

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.

Upvotes: 2

Views: 2314

Answers (1)

blgt
blgt

Reputation: 8205

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/

Upvotes: 12

Related Questions