1

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

    });

}

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

我在这里做错了什么？

现场演示在这里
用户名：dev
密码：lolboy

4

1 回答 1

1

您已将正文标记位置：固定和溢出：隐藏，这意味着滚动事件永远不会在窗口上触发，而是滚动事件在#treats-for-trash 上。Waypoint 监听窗口上的滚动事件。

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

于 2013-08-26T00:43:34.497 回答