Stoppen Sie das schwebende Sticky-Sidebar-Div in der Fußzeile (funktioniert fast)

Question

Ich möchte es so erreichen, dass das letzte Div in meiner Seitenleiste beim Scrollen der Seite hängen bleibt, aber in der Fußzeile stoppt.Ich habe es fast mit einem funktionieren Online-Tutorial, aber die Berechnung schlägt fehl, wenn Disqus-Kommentare geladen werden, und geht nur bis zu einem bestimmten Punkt.

Hier ist eine funktionierende Version http://jsfiddle.net/k56yR/1/, aber gibt es eine einfache Möglichkeit, beispielsweise die Fußzeilenhöhe zu berechnen und dann anzuweisen, den Bildlauf so weit vom Ende der Seite zu stoppen?

Answer 1

Ich denke, Ihr Problem ist, dass Ihr $('#footer').offset().top Der Wert ändert sich, nachdem Ihre Disqus-Kommentare geladen wurden.Sie müssen also aktualisieren footerTop (Und limit basierend auf dem Neuen footerTop Wert) nach dem Laden Ihrer Kommentare oder jedes Mal, wenn Ihr Ereignis ausgelöst wird.

etwas wie:

$(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});
          }
        });
   }
});

Wie in den meisten Fällen gibt es hierfür ein jQuery-Plugin, as Julianm wies in seinem Kommentar darauf hin, verfügbar Hier.Es unterstützt auch einen Stopperwert, um die Klebebox an jeder gewünschten Position anzuhalten.