7

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]
});
Quentin Roy
  • 7,677
  • 2
  • 32
  • 50
finners
  • 875
  • 16
  • 31
  • You could do checks in the scroll function, where you are in the document and get the offsets of the elemnts you want to act depending on scroll position and so on :) – Medda86 Jun 20 '16 at 10:09
  • Hey @Medda86, thanks for your response. Do you have a fiddle available for your answer so I can understand a little better? Thanks. – finners Jun 20 '16 at 11:28

1 Answers1

9

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/

elbecita
  • 2,616
  • 19
  • 28