context.refresh() and/or Waypoint.refreshAll() 不起作用？

Question

2/16 更新了新代码以反映从评论中发现的错误

我 waypoints 使用以下代码在页面上正常工作。请注意，我使用的是插件的 3.1.1 版，但我仍在使用类似于插件的 2.x 版的 jQuery 语法来处理一些复杂的选择器。此代码有效：

var stickTop = wrapper.waypoint({
    handler: function(direction){         
        var len = $(this.element).closest('.ctable').find('div.ctable-row').length; 
        if ((direction === 'down') && (len > 1)) {
            $(this.element).closest('.ctable').find(stickTarget).addClass('stuck').css("top", $pageHeadOffset );
        }
        else if ((direction === 'up') && (len > 1)) {
            $(this.element).closest('.ctable').find(stickTarget).removeClass('stuck');
        }
    }, 
    offset: $pageHeadOffset,
});

这（仍然）很好并且工作正常，但我在页面上有另一个调整大小的元素，有效地使页面更长。为了解决这个问题，我尝试在另一个点击目标上调用 Waypoint.refreshAll(); 和 stickTop.context.refresh();，如下所示：

$('.page-info-link').click(function(){
    $('.page-info').toggleClass('closed');
    $('.page-info-message').slideToggle();
    Waypoint.refreshAll();
});

但我无法使刷新准确工作。

有什么方法可以使用上面的 jQuery-like 语法（不传递 element: 选项并仍然调用刷新？

2/16 更新：

此新代码现在会触发控制台错误：

$('.page-info-link').click(function(){
    $('.page-info').toggleClass('closed')
    $('.page-info-message').slideToggle()
    stickTop.refresh()
});

错误："undefined is not a function"

Answer 1

这里有两个问题：

stickTop.refresh()：我不确定你为什么要改变这个。首先，stickTop 是一个数组，因为 $.fn.waypoint returns 是一个 Waypoint 实例数组，一个对应 jQuery 对象中的每个匹配元素。其次，refresh 不是 Waypoint 实例上的方法，它是 Context 上的方法。 TLDR：坚持 Waypoint.refreshAll().
slideToggle 是一个 jQuery 动画。您要做的是在动画完成后调用刷新，但它是一个异步函数。通过在它之后直接调用 refreshAll ，您甚至可以在动画开始之前进行刷新。您需要在动画的 complete 回调中调用刷新。

最终结果：

$('.page-info-message').slideToggle(function() {
  Waypoint.refreshAll()
})

context.refresh() and/or Waypoint.refreshAll() 不起作用？

context.refresh() and/or Waypoint.refreshAll() not working?

jquery

jquery-waypoints