Dừng thanh lề bên lề ở chân trang (gần như đang hoạt động)

Question

Tôi muốn lấy nó sao cho div cuối cùng trên thanh bên của tôi vẫn dính khi cuộn trang, nhưng dừng ở chân trang. Tôi có nó gần như làm việc với một online tutorial, nhưng tính toán messes lên khi disqus ý kiến ​​tải và nó chỉ đi đến một điểm nhất định.

Đây là phiên bản đang hoạt động http://jsfiddle.net/k56yR/1/, nhưng có cách nào dễ dàng để làm điều gì đó như tính chiều cao chân và sau đó yêu cầu dừng để cuộn cách xa phần dưới của trang?

Answer 1

Tôi nghĩ vấn đề của bạn là thay đổi giá trị $('#footer').offset().top sau khi tải nhận xét không đúng ý kiến ​​của bạn. Vì vậy, bạn cần phải cập nhật footerTop (và limit dựa trên giá trị footerTop mới) sau khi nhận xét của bạn tải hoặc mỗi khi sự kiện của bạn kích hoạt.

cái gì đó như:

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

Như với hầu hết các trường hợp, có một plugin jQuery cho điều này, như julianm chỉ ra trong bình luận của mình, sẵn here. Nó cũng hỗ trợ giá trị nút, để dừng hộp dính ở bất kỳ vị trí mong muốn nào.