고급 jQuery "Sticky Bottom"및 스크롤 사이드 바 문제

Question

이 문제에 대한 해결책을 찾기 위해 모든 곳을 검색하고 jQuery Way 포인트와 같은 몇 가지 플러그인을 사용하려고 시도했지만 아무런 성공도 얻지 못했지만 여기있는 누군가가 이것에 대한 해결책을 제시 할 수있다.

그냥 텍스트로 설명하기에 조금 복잡하기 때문에 동작 다이어그램을 만들었습니다.

아직 나에게 게시물과 이미지를 못하게 스팸 필터로이 링크를 참조하십시오 :

모든 요소는 내용에 따라 가변 높이입니다.

1. 페이지 내용보다 훨씬 더 짧은 사이드, 사이드 바의 DIV의 아래쪽 뷰포트를 입력하면

2. 을 갖는

그것은 나머지 동안 그 위치에 고정 유지됩니다

3. 의 콘텐츠가 정상적으로 계속 스크롤됩니다.

4. 사이드 바가 정상적으로 바닥 글과 함께 위쪽으로 스크롤되는 바닥 글에 도달 할 때까지.

사용자가 페이지 위쪽과 반대 방향으로 스크롤 할 때도 마찬가지입니다.

Answer 1

Here이 내 솔루션입니다. 이 예제를 사용하여 문제에 대한 고유 솔루션을 구현할 수 있습니다.

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; } 

및 자바 스크립트 :

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);