도킹 효과가있는 두 div 스크롤하기

Question

나는 두 개의 마른 div가 서로 옆에 있습니다. 둘 다 창문 안에 들어가기에는 너무 키가 크지 만, 하나는 두 번째 창보다 훨씬 크다.

초보자에게는 맨 위 가장자리가 정렬되어 있습니다. 아래로 스크롤을 시작하면 짧은 div의 아래쪽이 viwing 영역의 맨 아래에 닿을 때까지 놀라운 일은 일어나지 않아야합니다.

이 짧은 div는 고정되어야하며 스크롤을 계속하면 화면 영역 하단에 항상 고정되어야합니다.

이 순간에 스크롤을 시작하면 더 짧은 div가 도킹 해제되고 화면의 상단 가장자리가보기 포트의 상단 경계에 닿을 때까지 계속 스크롤됩니다.

요약 : 가장 긴 div는 자연스럽게 스크롤 할 수 있어야하지만 짧은 div는보기에서 사라져서는 안되며 창 하단 또는 상단 가장자리에 도킹하면됩니다.

.parent{ 
    position:relative; 
} 

#col1, #col2{ 
    width:350px; 
    color:white; 
    display:inline-block; 
    position:absolute; 
} 
#col1{ 
    background:grey; 

} 
#col2{ 
    background:darkgrey; 
    right:0; 
} 

#col1 .content{ 
    height:2000px; 
} 

#col2 .content{ 
    height:1600px; 
} 

내 생각이 짧은 사업부는 시청의 edgest 중 하나 접촉 감지했다 : http://jsfiddle.net/Laod7wLr/

<div class="parent"> 
    <div id="col1"> 
     Header 
     <div class="content"> </div> 
     Footer 
    </div> 
    <div id="col2"> 
     Header 
     <div class="content"> </div> 
     Footer 
    </div> 
</div> 

및 CSS : 여기

내가 생각 해낸 반 작업 솔루션입니다 영역을 조정 한 다음 위치를 고정으로 조정합니다. 크롤 방향이 바뀌었을 때 나는 ABSOLUTE으로 돌아왔다.

필자는 OnScrollUp/Down 이벤트를 성공적으로 감지하고 적절한 점검을했지만, 요소 폼 고정 위치를 ABSOLUTE로 변경하면 불안한 행동을한다.

FIXED/ABSOLUTE 저글링에 대한 접근 방식이 올바른지 궁금합니다. 어쩌면이 동작을 수행하는 플러그가있을 수 있습니다.

도움을 주시면 감사하겠습니다.

Answer 1

http://jsfiddle.net/Laod7wLr/14/

체크 아웃 내가 제공하고있는 JSFiddle합니다.

수학이 약간 이상해서 매우 이상한 인스턴스가 발생하여 CSS 요소가 변경되었습니다. 이것은 당신이 CSS에서 어떤 식 으로든하는 일의 기본값이되어야합니다. 나는 당신이 제공 한 JS에서 그것을 보지 못했습니다.

모든 항목을 확인하기 위해 1 개의 스크롤 이벤트 만 사용하고 모든 작업을 기능으로 분리하지는 않습니다.

정확하게 각 단계를 설명하기는 어렵지만, 이것은 당신이 요구하는 것에 매우 잘 작동합니다.

문제에 대해 더 궁금한 점이 있으면 알려주세요.

Answer 2

상단 거리로 스크롤하는 것이 작은 div보다 작은 경우에만 위로 스크롤 할 때 고정에서 점프로 이동하십시오. 그렇지 않으면 고정 된 채로 두십시오.

$(window).scrollTop()을 통해 창 상단에서 스크롤 거리를 얻을 수 있습니다.

는