javascript - 使 jQuery Waypoints 无法与 JavaScript 创建的内容很好地配合

Question

所以，我一直在为我目前正在从事的项目摆弄 jQuery Waypoints。 我过去使用过它，没有遇到任何问题，但对于这个特定的项目，我似乎无法让它工作。这次的不同之处在于，所有内容都注入(inject)了 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();
          }
        });

    });

}

所发生的情况是航路点仅被触发一次，并且仅触发一次。 除非您滚动到底部并刷新页面，否则它将识别最顶部的部分，而不是其他部分，然后它将识别所有四个元素。

我在这里做错了什么？

现场演示已开始 HERE
用户名:dev
密码:lolboy

Answer 1

您已将正文标记设置为position:fixed 和overflow:hidden，这意味着滚动事件永远不会在窗口上触发，而是在#treats-for-trash 上触发。 Waypoint 监听窗口上的滚动事件。

您应该更改 css，以便滚动窗口而不是文章，或者将 Waypoint 的上下文更改为正确的元素，即 #treats-for-trash(请参阅: http://imakewebthings.com/jquery-waypoints/#doc-options )。