Nâng cao jQuery "Sticky Bottom" và cũng Scrolling Sidebar Issue

Question

Đã tìm kiếm ở khắp mọi nơi để giải quyết vấn đề này, và cố gắng sử dụng một vài plugin như jQuery Way-points, không có mức độ thành công, tôi hy vọng rằng ai đó ở đây sẽ có thể đưa ra một giải pháp cho điều này.

Vì nó phức tạp một chút để giải thích chỉ với văn bản, tôi đã tạo ra một biểu đồ về hành vi.

Xem liên kết này như bộ lọc thư rác sẽ không cho phép tôi bưu chính, hình ảnh nào:

Tất cả các yếu tố này là của một chiều cao biến tùy thuộc vào nội dung.

1. Có một sidebar đó là ngắn hơn nhiều so với nội dung trang,

2. Khi đáy của div sidebar đi vào khung nhìn,

3. Nó sẽ ở lại cố định ở vị trí đó trong khi phần còn lại nội dung sẽ tiếp tục cuộn như bình thường.

4. Cho đến khi thanh bên đến chân trang, nơi thanh này sẽ cuộn lên trên với chân trang như bình thường.

Điều này cũng sẽ hoạt động ngược lại khi người dùng cuộn theo hướng ngược lại lên đầu trang.

Answer 1

Here là giải pháp của tôi. Bạn có thể sử dụng ví dụ này và thực hiện giải pháp của riêng bạn cho vấn đề của bạn.

HTML:

<div id="header"> 
    header 
</div> 
<div id="left"> 
    Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor. 
    Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor. 
</div> 
<div id="right"> 
Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. amet, gravida eget, porta at, wisi. Nam non 000000000 lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. 
</div> 
<div id="footer"> 
    footer 
</div> 

CSS:

body { position: relative; } 
#header { width: 100%; height: 100px; background: #f00; margin-bottom: 10px; } 
#left { width: 75%; background: #f00; float: left; margin-bottom: 10px; } 
#right { width: 20%; background: #00f; float: right; position: relative; right: 0; } 
#footer { clear: both; width: 100%; height: 100px; background: #f00; } 

và cuối cùng Javascript:

function scrollCheck() { 
    var $right = $('#right'), 
     scrollTop = $(window).scrollTop(), 
     windowHeight = $(window).height(), 
     docHeight = $(document).height(), 
     rightHeight = $right.height(), 
     distanceToTop = rightHeight + 110 - windowHeight, 
     distanceToBottom = scrollTop + windowHeight + 110 - docHeight; 
    if (scrollTop > distanceToTop) { 

     $right.css({ 
      'position': 'fixed', 
      'bottom': (scrollTop + windowHeight + 110 > docHeight ? distanceToBottom + 'px' : '0px') 
     }); 
    } 
    else { 
     $right.css({ 
      'position': 'relative', 
      'bottom': 'auto' 
     }); 
    } 
} 

$(window).bind('scroll', scrollCheck);