Machen Sie jQuery Wegpunkte unhackig, wenn Sie den Fußzeilenbereich berühren

Question

So verwende ich jQuery Wegpunkte für ein klebriges Social Media Nav, das perfekt funktioniert, jedoch, wenn ich das Fußzeilenelement scrolle scrollen. Idealerweise möchte ich, dass das Sticky-Nav am unteren Rand seines übergeordneten Containers (.content) bleibt, wenn es auf die Fußzeile trifft, und umgekehrt, wenn der Benutzer zurückscrollt, sollte das Sticky-Nav wieder klebrig werden.

Kennt jemand einen einfachen Weg, dies zu erreichen? Here's a fiddle.

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

Answer 1

Sie benötigen einen anderen Wegpunkt in der Fußzeile zu setzen, und wenn die klebrige div die Fußzeile erreichen wird (dh Setup mit der Offset-Option), entfernen Sie die .stuck Klasse, die die div fixiert werden macht (Mit einem Toggle kommt die .stuck Klasse wieder, wenn die Fußzeile das sticky div wieder anzeigen lässt). Sie erreichen dies mit:

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

Überprüfen Sie, ob das ist, was Sie wollen (so hoffen :)!): https://jsfiddle.net/elbecita/mna64waw/3/

EDIT: ich eine Sache vergessen !! Sie brauchen eine Klasse für das klebrige div, wenn die Fußzeile übertrifft, so dass die endgültige js Sie brauchen würden:

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

und die .sticky-surpassed wäre:

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

prüfen Update hier: https://jsfiddle.net/elbecita/mna64waw/5/