Make jQuery waypoints unstick when you hit the footer section

Question

So I'm using jQuery waypoints for a sticky social media nav which is working perfectly, however, when I hit the footer element it keeps scrolling. Ideally I would like the sticky nav to stay at the bottom of its parent container (.content) when it hits the footer and conversely when the user scrolls back up then the sticky nav should become sticky again.

Does anyone know a simple way of achieving this? Here's a fiddle.

var sticky = new Waypoint.Sticky({
  element: $('.sticky')[0]
});

Answer 1

You need to set another waypoint in the footer, and when the sticky div is going to reach the footer (that is setup with the offset option), remove the .stuck class that makes the div to be fixed (with a toggle, the .stuck class comes again when the footer lets the sticky div to be displayed again). You achieve this with:

$('.footer').waypoint(function(direction) {
    $('.sticky').toggleClass('stuck', direction === 'up')
}, {
offset: function() {
    return $('.sticky').outerHeight()
}});

Check if that is what you want (hope so! :) ): https://jsfiddle.net/elbecita/mna64waw/3/

EDIT: I forgot one thing!! you need a class for the sticky div when the footer surpasses it, so the final js you need would be:

$('.footer').waypoint(function(direction) {
    $('.sticky').toggleClass('stuck', direction === 'up');
    $('.sticky').toggleClass('sticky-surpassed', direction === 'down');
}, { offset: function() {
       return $('.sticky').outerHeight();
}});

and the .sticky-surpassed would be:

.sticky-surpassed {
    position:absolute;
    bottom: 0;
}

Check update here: https://jsfiddle.net/elbecita/mna64waw/5/