플로팅 스크롤 요소가 스크롤 위치를 변경 중입니다.

Question

JSFiddle

페이지가 3 개 섹션으로 나뉩니다. 머리글, 세로 막대 및 내용 섹션. 사이드 바가 페이지를 스크롤 할 때 페이지가 맨 위에 닿을 때까지 기다렸다가 다시 아래로 스크롤하여 헤더의 맨 아래에 붙습니다. 관련 조각 :

var Sidebar = $("#Dock"), pos = Sidebar.offset(); 

$(window).scroll(function() { 
    console.log('pre ' + Sidebar.hasClass('fixed') + ' | ' + $(this).scrollTop() + ' | ' + (pos.top + 10)); 
    if ($(this).scrollTop() > (pos.top + 10) && Sidebar.hasClass('notFixed')) { 
     Sidebar.removeClass('notFixed'); 
     Sidebar.addClass('fixed'); 
    } else if ($(this).scrollTop() <= (pos.top + 10) && Sidebar.hasClass('fixed')) { 
     Sidebar.removeClass('fixed'); 
     Sidebar.addClass('notFixed'); 
    } 
    console.log('pos ' + Sidebar.hasClass('fixed') + ' | ' + $(this).scrollTop() + ' | ' + (pos.top + 10)); 
}); 

그래서 여기에 실제로 무슨 일이야 : 우리는 아래로 스크롤, 우리는 우리의 부유 요소에서 notFixed 클래스를 제거하려면에게 fixed 클래스를 제공하고 즉시 $(this).scrollTop() = 23로 이동합니다. 마지막으로, 빌드 된 모든 스크롤 이벤트가 해결되고 마지막 위치에서 23으로 리셋되고 23으로 재설정됩니다. 피들에서는 23 대신에 0입니다.

왜 튀어 나오고 어떻게 해결할 수 있습니까?

Answer 1

편집 : 당신이 #dock에 height: 1000px 없었다, 그리고 몸에 더 높이 때문에 업데이트 바이올린 http://jsfiddle.net/WHLHW/4/

가 작동하지 않는 이유입니다. 따라서 페이지의 높이가 #dock이므로 #dock을 스크롤 할 수 없습니다.

그래서 나는 다음과 같이 해냈다.

#dock { 
    height:300px; 
} 

body { 
    height: 1000px; 
}