The new Waypoint documentation points to a simple shortcut for initializing a "sticky" element on page scroll. My problem stems from the fact that the new documentation is a little thin on documentation when an offset is needed.
This code works great for me, so I know the plug in is working (and it is inside $().ready(function()) :
if($('.js-sticky').length > 0) {
var sticky = new Waypoint.Sticky({
element: $('.js-sticky')[0]
});
}
This newer method does not have an option for offset built in, but the full non-shortcut version of Waypoints does. It would look like this:
var waypoint = new Waypoint({
element: $('.js-sticky'),
handler: function(direction) {
[do stuff]
},
offset: $(".head").outerHeight(true)
})
My problem is that I don't know what to do inside [do stuff] to replicate what the Waypoints Sticky shortcut already does, which is add a .stuck class, wrap the element with a placeholder div the same height as the element, and then destroy the placeholder when the user scrolls back to the top.
Has anyone done this with the newest version of Waypoints.js? Thanks ahead of time.
From the Sticky Shortcut page you linked to:
When creating a new Sticky you can also pass along an options object. This options object can take all of the options of a normal Waypoint, as well as a few extras specific to the Sticky class.
Did you find that if you passed offset as an option in your Sticky initializer it had no effect?