Make jQuery waypoints unlocked when hit in the footer

Question

So, I use jQuery waypoints for a sticky social media navigator that works great, however, when I click on the footer element, it continues to scroll. Ideally, I would like the sticky navigator to stay at the bottom of its parent container (.content) when it gets to the footer, and vice versa, when the user scrolls the backup, then the sticky nav should become sticky again.

Does anyone know an easy way to achieve this? Here is the violin .

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

Answer 1

You need to set a different waypoint in the footer, and when the sticky div reaches the footer (this is an offset setting), remove the .stuck class that will cause the div to be fixed (with toggle, the .stuck class appears again when the footer allows it to display again sticky div). You achieve this with:

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

Make sure this is what you want (hope so! :)): https://jsfiddle.net/elbecita/mna64waw/3/

EDIT: I forgot one thing !! you need a class for a sticky div when the footer is superior to it, so the final js you need:

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

a .sticky-surpassed will be:

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

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