바닥 글에 멈추는 고정 위치 사이드 바

Question

나는이 질문을 여기 몇 번 본 적이 있지만 아직 좋은 대답을 찾지 못했기 때문에 다시 물어볼 것이라고 생각했습니다.

정상적인 HTML 흐름에서 요소를 분리하는 내 문서의 맨 위에 고정 된 위치에 사이드 바가 있습니다.

바닥 글이있는 곳으로 스크롤하면 사이드 바가 바닥 글에 밀려 올려 지도록하고 싶습니다.

HTML

<div id="content"> 
    <div id="sidebar"> 
    <ul> 
     <li>link</li> 
     <li>link</li> 
     <li>link</li> 
    </ul> 
    </div> 
</div> 
<div id="footer"> 
    <p>content of unspecified height</p> 
    <p>content of unspecified height</p> 
    <p>content of unspecified height</p> 
    <p>content of unspecified height</p> 
</div> 

CSS

#content { 
    width: 800px; 
    margin: 0 auto; 
    position: relative; 
} 

#sidebar { 
    padding: 10px; 
    position: fixed; 
    top: 0; 
} 

#footer { 
    padding: 10px; 
} 

JS

...? 

나는 일이 필요 상상

때 화면의 "내용"DIV 스크롤의 바닥, 그러면 JS가 사이드 바 위치를 div의 하단에 대한 절대 또는 상대 위치로 전환하여 정상 f로 돌아갈 수 있습니다 낮은 ..하지만 나는 최선의 접근 방식에 대한 제안에 열려 있습니다.

편집 : 백업 페이지 스크롤, 사이드 바는 단지의 경우 고정 상단 포지셔닝 - 다시 갈 필요 때 아, 네, 그것은 JS 새로운

아직도입니다 :) 명확하지이었고, 기존의 답변 중 일부가 나를 위해 클릭하지 못하는 또 다른 이유 인 JQuery.

입력 해 주셔서 감사합니다. 내가 무엇인가를 명확히하거나 고쳐야 할 필요가 있는지 알려주세요.

Answer 1

$(window).on('scroll') 바닥 글의 맨 위와 창을 비교하는 기능이 필요합니다. 사이비 코드 :

참고

//Make the height of side nav shrink as we scroll past the footer 
var intPos = TopOfFooter - BottomOfWindow 
If (intPos < 0) { 
    var newHeight = $(window).height() + intPos // intPos is negative so will take away 
    $('#sidebar').height(newHeight); 
} else { 
    $('#sidebar').height('100%'); 
} 

또는 그 효과에 뭔가 ...

편집 : 작동 할 수처럼

var TopOfFooter = $('#footer').offset().top; 
var BottomOfWindow = $(window).scrollTop() + $(window).height();