Detener la división flotante de la barra lateral adhesiva en el pie de página (casi en funcionamiento)

Question

Lo quiero obtener así que el último div en mi barra lateral permanece fijo cuando la página se desplaza, pero se detiene en el pie de página. Lo tengo casi trabajando con un online tutorial, pero el cálculo se arruina cuando los comentarios de descarga se cargan y solo llega a cierto punto.

Aquí hay una versión de trabajo http://jsfiddle.net/k56yR/1/, pero ¿hay una manera fácil de hacer algo como calcular la altura del pie de página y luego decirle que deje de desplazarse tan lejos de la parte inferior de la página?

Answer 1

Creo que su problema es que su valor de $('#footer').offset().top cambia después de la carga de sus comentarios vacíos. Por lo tanto, debe actualizar footerTop (y limit según el nuevo valor footerTop) después de cargar sus comentarios o cada vez que se desate el evento.

algo como:

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

Al igual que con la mayoría de los casos, hay un plugin de jQuery para esto, como julianm señaló en su comentario, disponible here. También admite un valor de tope para detener la caja adhesiva en cualquier posición deseada.