Question

所以，我一直在为我正在研究的项目摆弄jQuery Waypoints。我过去曾经使用它并没有遇到任何麻烦但是对于这个特殊的项目我似乎无法让它发挥作用。这一次的不同之处在于所有的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();
          }
        });

    });

}

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

我在这里做错了什么？

现场演示已上线HERE
用户名：dev
密码：lolboy

Answer 1

你已经使你的身体标记位置：固定和溢出：隐藏，这意味着滚动事件永远不会在窗口上触发，而滚动事件在＃treats-for-trash上。 Waypoint侦听窗口上的滚动事件。

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

无法让jQuery Waypoints充分利用JavaScript创建的内容

1 个答案: