Imposta waypoint jQuery unstick quando si preme la sezione footer

Question

Quindi sto utilizzando waypoint jQuery per un social media stick nav che funziona perfettamente, tuttavia, quando raggiungo l'elemento footer continua a scorrere. Idealmente, mi piacerebbe che il navigatore appiccicoso rimanga nella parte inferiore del contenitore principale (.content) quando colpisce il piè di pagina e, al contrario, quando l'utente fa scorrere di nuovo indietro, il nav sticky dovrebbe diventare nuovamente appiccicoso.

Qualcuno conosce un modo semplice per raggiungere questo obiettivo? Here's a fiddle.

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

Answer 1

è necessario impostare un altro waypoint nel piè di pagina, e quando il div appiccicoso sta per raggiungere il piè di pagina (cioè l'installazione con l'opzione offset), rimuovere la classe .stuck che rende il div da fissare (con un interruttore, la classe .stuck viene di nuovo quando il piè di pagina consente di visualizzare nuovamente il div di appiccicoso). A raggiungere questo con:

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

Verificare se questo è ciò che si vuole (spero :)!): https://jsfiddle.net/elbecita/mna64waw/3/

EDIT: Ho dimenticato una cosa !! avete bisogno di una classe per il div appiccicoso quando il piè di pagina lo supera, in modo che i js finali necessari sarebbe:

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

e la .sticky-surpassed sarebbe:

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

controllo degli aggiornamenti qui: https://jsfiddle.net/elbecita/mna64waw/5/