Jquery Waypoint with nested div not working

Question

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 ```

Waypoint

``` 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.

Accepted Answer

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/

Jquery Waypoint with nested div not working

Solution

Problem