javascript - スティッキーDivは@ボトムで停止します

Question

スティッキーなdivがありますが、下に向かって特定のポイントで停止する必要があります。確かに、例（下のリンク）では、底にぶつかることはありませんが、幅の広いdivがある場合は、フッターにぶつかる前に停止させたいと思います。質問がわからない場合はお知らせください。助けていただければ幸いです。

http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

Answer 1

これを解決できる jquery プラグインを次に示します。このプラグインは、例にあるように、要素をページの上部に固定します。また、停止したい要素の上部にオプションの制限を設定すると、スクロールするとページが上に移動するはずです。触れたくない要素に触れる前に、「固定」要素の高さを制限に追加して、ページを再度上に移動させる必要があります。必要に応じてマージンを加えます。

これを示すフィドルは次のとおりです。http://jsfiddle.net/ZczEt/2/

プラグインとそのソースは次のとおりです: https://github.com/bigspotteddog/ScrollToFixed

// the limit is optional, but it will make the header move up the
// page again once it reaches the 7th paragraph
$(document).ready(function() {
    $('.header').scrollToFixed( { limit: $($('h2')[7]).offset().top } );
});

言い忘れましたが、このプラグインは、固定ヘッダーの下のコンテンツのヒッチも修正します。あなたの例では、ゆっくりとスクロールすると、固定されたときにコンテンツがヘッダーの高さをジャンプすることに気付くでしょう。それを補うのがこのプラグインです。

Answer 2

例から少し離れていますが、これはあなたが求めていることだと思います：

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_bottomEdge = window_top + $('#sticky').outerHeight();
    var avoid_top = $('#avoidMe').offset().top;
    if (div_bottomEdge < avoid_top) $('#sticky').css('top', window_top);
}

$(document).ready(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

詳細については、この jsFiddle の例を参照してください

Answer 3

私はjqueryプラグインを使用しました

 https://github.com/garand/sticky

一番下で停止するには：

 (function($) {

    var limit_bottom=$('#footer').height(); 
    $('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});
   })(jQuery);