jQuery 웨이 포인트가 자바 스크립트로 생성 된 콘텐츠로 잘 작동하는 데 문제가 있습니다.

Question

그래서 저는 현재 작업하고있는 프로젝트의 jQuery Waypoint를 둘러 보았습니다. 나는 그것을 과거에 사용했지만 아무런 문제가 없었습니다. 그러나이 특정 프로젝트에서는 제대로 작동하지 않는 것 같습니다. 이번에 다른 점은 모든 contenet에 JavaScript가 삽입되어 있다는 점입니다. 단, $.waypoints('refresh');을 사용하면 간단히 웨이 포인트 위치를 업데이트 할 수 있습니다.

콘텐츠가 즉석에서 만들어지기 때문에 스크립트가 초기화되기 전에 콘텐츠가로드되는지 타이머를 도입했습니다.

$(document).ready(function(){ 

    setTimeout(function(){ 

     waypoints(); 
     $.waypoints('refresh'); 

    }, 2000); 

}); 

function waypoints() { 

    alert('jQuery Waypoint has initialized'); 
    //ep.listener.waypoints() 

    $(function() { 
     var $things = $('article.curr section'); 

     $things.waypoint(function(direction) { 
      if (direction === 'down') { 
      //do stuff 
      console.log(this); 
      console.log('down'); 
      } 
     }, { offset: '50%' }); 

     $things.waypoint(function(direction) { 
      if (direction === 'up') { 
      //do stuff 
      console.log(this); 
      console.log('up');    
      } 
     }, { 
      offset: function() { 
      return $.waypoints('viewportHeight')/2 - $(this).outerHeight(); 
      } 
     }); 

    }); 

} 

웨이 포인트가 한 번만 실행되며 한 번만 실행됩니다. 맨 아래 부분으로 스크롤하고 페이지를 새로 고치지 않으면 4 개의 요소가 모두 인식됩니다.

내가 뭘 잘못하고 있니?
비밀번호를 dev에 :

이 라이브 데모 HERE
이름 달려있다 lolboy

Answer 1

당신은 당신의 몸 태그 위치를 만든 : 고정 및 오버 플로우 : 숨겨진 스크롤 이벤트를 의미 창에 트리거되지 않습니다, 대신 스크롤 이벤트는 # treats-for-trash에 있습니다. Waypoint는 창에서 스크롤 이벤트를 수신합니다.

기사 대신 창을 스크롤하도록 CSS를 변경하거나 Waypoint의 컨텍스트를 올바른 요소 (예 : # treats-for-trash)로 변경해야합니다 (참조 : http://imakewebthings.com/jquery-waypoints/#doc-options 참조).