To ensure the sticky div behaves correctly as it reaches the footer, you must add another waypoint in the footer. This waypoint will remove the .stuck class when the sticky div is about to reach the footer (set up with the offset option). The .stuck class makes the div fixed until the footer allows it to be displayed again. Here's how you can achieve this:
$('.footer').waypoint(function(direction) {
$('.sticky').toggleClass('stuck', direction === 'up')
}, {
offset: function() {
return $('.sticky').outerHeight()
}});
Please verify if this meets your requirements by visiting: https://jsfiddle.net/elbecita/mna64waw/3/
UPDATE: I almost forgot one crucial detail!! You also need a class for the sticky div when the footer passes over it. Therefore, the final JavaScript code would look like this:
$('.footer').waypoint(function(direction) {
$('.sticky').toggleClass('stuck', direction === 'up');
$('.sticky').toggleClass('sticky-surpassed', direction === 'down');
}, { offset: function() {
return $('.sticky').outerHeight();
}});
The styles for .sticky-surpassed should be as follows:
.sticky-surpassed {
position:absolute;
bottom: 0;
}
For the latest update, click here: https://jsfiddle.net/elbecita/mna64waw/5/