Jquery 웨이 포인트 이벤트가 페이지 맨 아래에있는 요소에서 실행되지 않습니다.

Question

footer가 뷰포트의 안팎으로 들어올 때 jquery-waypoint 플러그인을 사용하여 이벤트를 발생 시키려고합니다.

jsfiddle에 예제를 만들었지 만 이벤트가 바닥 글 요소에서 실행되지 않습니다.

제안 사항?

Answer 1

웨이 포인트가 스크롤 창 상단이 웨이 포인트에 도달했을 때만 트리거되기 때문에 이벤트가 트리거되지 않습니다. 귀하의 경우 HR 요소를 창 상단으로 스크롤 할 수 없기 때문에 웨이 포인트에 도달하지 못합니다. 당신이이 문제를 해결 할 수

한 가지 방법은 실제로 스크롤 창의 상단에 도달하기 전에 이벤트 900px 해고 웨이 포인트를 말할 것이다

$(document).ready(function() { 
    $('hr').waypoint(function(event, direction) { 
    alert(direction); 
    }, {offset: 900}); 
});​ 

을 웨이 포인트 오프셋 매개 변수를 제공하는 것입니다. 그러나이 솔루션은 사용자 화면 해상도에 따라 달라 지므로 최적이 아닙니다. 브라우저 창 크기의 크기를 조정하여 테스트하고이를 수행하는 방법을 확인할 수 있습니다.

더 나은 해결책이 있습니다. 당신이 달성하기를 원하는 것을 알지 못한다면 마지막 기사에서 웨이 포인트를 설정하는 것이 좋습니다.

Answer 2

explicit-pixels-from-top보다는 offset:까지의 백분율을 전달하십시오. 당신이 바닥에서 화면을 입력 요소에 화재 웨이 포인트하려면

$('containerDiv').waypoint(function() { 
     $('targetElem').fadeIn(); 
    }, { offset: '50%' }); 

Answer 3

가 offset: '100%'

$('hr').waypoint(function(event, direction) { 
    // Do something 
    }, {offset: "100%"});