フッターセクションにヒットしたときにjQueryウェイポイントを解除する

Question

完全に動作するスティッキソーシャルメディアナビゲーションにjQueryウェイポイントを使用していますが、フッターエレメントにヒットするとスクロールします。理想的には、親コンテナ（.content）の下部に留まるようにしたいと思います。逆にユーザーがスクロールすると、スティッキーなナビゲーションが再びスティッキーになるはずです。

これを達成する簡単な方法を知っている人はいますか？ Here's a fiddle。

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

Answer 1

あなたはフッターに別のウェイポイントを設定する必要があり、かつ粘着性のdivはフッターを（そのオフセットオプションで設定）で到達しようとしたときに、div要素が固定されるようになります.stuckクラスを削除します（トグルでは、フッターでスティッキーdivを再度表示させると、.stuckクラスが再び表示されます）。それは（！そう願っています:)）あなたが望むものである場合

$('.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/