無法使jQuery Waypoint與JavaScript創建的內容完美兼容

Question

因此，我一直在為當前正在研究的項目使用jQuery Waypoint。 我過去使用它並沒有遇到任何麻煩，但是對於這個特定項目，我似乎無法使其正常工作。 這次的不同之處在於，所有contenet都注入了JavaScript，盡管在使用$.waypoints('refresh');這不是問題$.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();
          }
        });

    });

}

發生的情況是，僅一次觸發一次航點，並且一次僅觸發一次。 它將識別是否是最頂部的部分，除非您滾動到底部並刷新頁面，否則將識別所有四個元素。

我在這里做錯了什么？

現場演示在這里
用戶名：dev
密碼：lolboy

Answer 1

您已將body標簽的位置設置為：固定和溢出：隱藏，這意味着滾動事件從未在窗口上觸發，而是滾動事件在＃treats-for-trash上。 Waypoint偵聽窗口上的滾動事件。

您應該更改css以便滾動窗口而不是文章，或者將Waypoint的上下文更改為正確的元素，即＃treats-for-trash（請參閱： http : //imakewebthings.com/jquery-waypoints/ ＃doc-options ）。