Jquery Waypoints 새로 고침

Question

중간 지점을 사용하여 위치가있는 페이지를 아래로 스크롤하는 끈적 div를 만드는 페이지에서 작업 중입니다. : 해당 div의 하단에 도달 할 때까지 고정됩니다. $ .waypoints ('refresh')가 호출 될 때까지 im이 의도 한대로 작동하는 코드는 sticky div가 페이지 상단으로 점프하고 고정 된 위치를 잃습니다.

을 Heres 코드 : #leftCol이 페이지를 아래로 스크롤하고 #content가 부모 DIV이다 사업부는

$('#content').waypoint(function(event, direction){ 
if (direction === 'down') { 
    $(this).removeClass('sticky').addClass('bottomed'); 
} 
else { 
    $(this).removeClass('bottomed').addClass('sticky'); 
} 
}, { 
    offset: function() { 
    return $('#leftCol').outerHeight() - $('#content').outerHeight(); 
} 

}).find('#leftCol').waypoint(function(event, direction) { 
    $(this).parent().toggleClass('sticky', direction === "down"); 
    event.stopPropagation(); 
     });   

.

내가 가진 CSS는 다음과 같습니다

#content { 
width: 975px; 
height: auto; 
position: relative; 
margin-top: 10px; 
margin-bottom: 20px; 
min-height: 800px; 
} 

#leftCol { 
position: absolute; 
width: 974px; 
} 

.sticky #leftCol { 
position:fixed !important; 
top:0 !important; 
left: 50% !important; 
width: 974px !important; 
margin-left: -488px; 
} 

.bottomed #leftCol { 
position: absolute !important; 
bottom: 0px; 
} 

라고 $ .waypoints ('새로 고침') 많이 주시면 감사하겠습니다 때 #leftCol의 위치를 ​​유지하는 방법에 어떤 아이디어.

감사

Answer 1

은 이제까지 웨이 포인트로 fixed 위치 요소를 사용하지 않도록하세요. GitHub의 닫힌 다음 호를 모두 참조하십시오 : #64, #44, #32, #26, #24, #13, #10, #4.

이것은 Waypoints에 대해 가장 쉽게 이해할 수있는 점으로, Waypoints의 작동 방식을 알리지 못하는 것은 내 잘못입니다. 나는이 플러그인을 다음 반복에서 훨씬 더 명확하게 만들 계획이다.

궁금한 사람 : Waypoints는 요소의 페이지 오프셋을보고 작동합니다. 그러나 고정 위치 요소의 페이지 오프셋은 사용자가 스크롤 할 때마다 계속 변경됩니다. 따라서 새로 고침이 호출 될 때마다 다른 웨이 포인트를 추가하거나 브라우저의 크기를 조정하여 수동으로 호출 할 때마다 해당 웨이 포인트의 위치가 페이지 스크롤에서 사용자가있는 모든 위치와 일치하도록 변경됩니다. 원하는 것은 문서 흐름을 중간 지점으로 남겨 두지 않는 정상적인 정적 위치 요소입니다. Waypoints 프로젝트 사이트에서 제공하는 예에서 웨이 포인트는 자리에 남아있는 래퍼 요소이며, nav은 CSS를 통해 고정 된 위치를 잃어 버리고 이득을 감 춥니 다. 직관적 인 것처럼 페이지 오프셋과 CSS가 OP가 여기서 한 일을 이해하지 못하는 사람에게는 매우 쉽습니다. 다시 이것은 앞으로 문서/예제에서보다 직접적으로 다루어 질 것입니다.