Stoppen Sie schwimmende klebrige Seitenleiste div am Footer (fast funktioniert)

Question

Ich möchte es bekommen, so dass das letzte div auf meiner Seitenleiste klebrig bleibt, wenn die Seite scrollt, aber an der Fußzeile stoppt. Ich habe es fast mit einem online tutorial arbeiten, aber die Berechnung durcheinander bringt, wenn Kommentare geladen werden und es nur zu einem bestimmten Punkt geht.

Hier ist eine funktionierende Version http://jsfiddle.net/k56yR/1/, aber gibt es eine einfache Möglichkeit, etwas wie die Fußzeilenhöhe zu berechnen und dann sagen, damit aufhören zu scrollen, dass weit vom unteren Rand der Seite?

Answer 1

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

so 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 bei den meisten Fällen gibt es eine jQuery-Plugin für diese, wie julianm in seinem Kommentar, here verfügbar hingewiesen. Es unterstützt auch einen Stopper-Wert, um die klebrige Box an jeder gewünschten Position zu stoppen.