Сделать путевые точки jQuery разблокированными, когда вы попадаете в нижний колонтитул

Question

Так что я использую путевые точки jQuery для липкого навигатора социальных сетей, который отлично работает, однако, когда я нажимаю элемент нижнего колонтитула, он продолжает прокручивать. В идеале я хотел бы, чтобы липкий навигатор оставался в нижней части своего родительского контейнера (.content), когда он попадал в нижний колонтитул, и наоборот, когда пользователь прокручивает резервную копию, тогда липкий nav должен снова стать липким.

Кто-нибудь знает простой способ достичь этого? Here's a fiddle.

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

Answer 1

Вам необходимо установить другую точку в сноске, а когда липкий ДИВ собирается достичь колонтитула (то есть установка с возможностью смещения), удалите .stuck класс, который делает ДИВ быть фиксированным (с переключателем, класс .stuck снова появляется, когда нижний колонтитул позволяет снова отображать липкий div). Это достигается с:

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

Проверьте, если это то, что вы хотите (надеюсь :)!): https://jsfiddle.net/elbecita/mna64waw/3/

EDIT: Я забыл одну вещь !! вам нужен класс для липкого DIV, когда сноска превосходит его, так что окончательные JS вам нужно будет:

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

и .sticky-surpassed будет:

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

Проверить обновление здесь: https://jsfiddle.net/elbecita/mna64waw/5/