jQuery Waypoints Context not Working in Safari or Chrome

Question

I have a web application that sizes the html and body elements at 100% width and height and puts overflow: scroll on body to create full screen slide elements. I'm using jQuery Waypoints for sticky navigation and to determine which slide is currently visible.

Since the body element is technically the one scrolling, I set context: body. This works as expected in Firefox, but the waypoints won't fire in Chrome or Safari.

I can get the waypoints to fire by manually calling $.waypoints('refresh'); after scrolling to a point where they should have fired, but calling this after every scroll event seems like a very cumbersome solution.

$('body').on('scroll', function(){$.waypoints('refresh');}) —it works, but sure isn't pretty.

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?

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.

For the record (and before anyone asks), I've done my research and this isn't an issue with fixed elements.

Edit: finally got a CodePen built for this. Take a look.

Answer 1

Remove overflow:hidden from html. Unfortunately looks like this is required - I hope it doesn't break your layout.

Next, you'll need #nav.stuck { position: fixed; } instead of absolute for a sticky header.

Use this js:

$('#nav').waypoint(function(direction) {
  if (direction == 'down') {
          $(this).addClass('stuck');
        } if (direction == 'up') {
          $(this).removeClass('stuck');
        };
});

That works for me - see http://codepen.io/anon/pen/GgsdH