jquery - フッターでスティッキーサイドバーdivのフローティングを停止します（ほぼ機能しています）

Question

ページがスクロールしたときにサイドバーの最後のdivが固定されたままになるように取得したいのですが、フッターで停止します。私はそれをほとんどオンラインチュートリアルで動作させていますが、disqusコメントがロードされると計算が混乱し、特定のポイントにしか到達しません。

これが動作中のバージョンhttp://jsfiddle.net/k56yR/1/ですが、フッターの高さを計算して、ページの下部からそれほど遠くまでスクロールを停止するように指示するような簡単な方法はありますか？

Answer 1

あなたの問題は$('#footer').offset().top、disqusコメントがロードされた後に値が変わることだと思います。したがって、コメントが読み込まれた後、またはイベントが発生するたびにfooterTop（limit新しい値に基づいて）更新する必要があります。footerTop

何かのようなもの：

$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});

ほとんどの場合と同様に、julianmが彼のコメントで指摘したように、このためのjQueryプラグインがあります。また、スティッキーボックスを任意の位置で停止するためのストッパー値もサポートしています。