Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Waypoints Context not Working in Safari or Chrome
    text
    copied!<p>I have a web application that sizes the html and body elements at 100% width and height and puts <code>overflow: scroll</code> on body to create full screen slide elements. I'm using <a href="https://github.com/imakewebthings/jquery-waypoints/" rel="nofollow noreferrer">jQuery Waypoints</a> for sticky navigation and to determine which slide is currently visible.</p> <p>Since the body element is technically the one scrolling, I set <code>context: body</code>. This works as expected in Firefox, but the waypoints won't fire in Chrome or Safari.</p> <p>I can get the waypoints to fire by <strong>manually</strong> calling <code>$.waypoints('refresh');</code> after scrolling to a point where they should have fired, but calling this after every scroll event seems like a very cumbersome solution.</p> <p><code>$('body').on('scroll', function(){$.waypoints('refresh');})</code> —it works, but sure isn't pretty.</p> <p>I'm assuming this has something to do with how each browser interprets the DOM, but is there a known reason why Chrome and Safari wouldn't play nicely with waypoints in scrollable elements?</p> <p>I'm looking for one of two things, either what I've done backwards in my use of waypoints, or what the underlying issue is so I can fix it and make waypoints work properly for everyone.</p> <p>For the record (and before anyone asks), I've done my research and this isn't an issue with <a href="https://stackoverflow.com/a/10448000/1084401">fixed elements</a>. </p> <p><strong>Edit:</strong> finally got a CodePen built for this. <a href="http://codepen.io/justinthrelkeld/pen/qaGlK" rel="nofollow noreferrer">Take a look</a>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload