waypoints（多个）； refreshAll 不工作

Question

我在 http://www.piroc.com/delete/waypointsTest.html 上使用了几个 waypoints，主要是为了在滚动时为元素设置动画。但是一旦动画对象改变高度，下面的 waypoints 就会错位。我阅读了所有关于 refreshAll() 函数的内容，并在我认为合适的地方使用了它，但这显然是不对的。此外，每当我调整 window 的大小时，页面上四个圆圈的动画在正确的位置不起作用。

这是我的代码

var homeCircles = jQuery('#home-circles');
var whatWeDo = jQuery('#what-we-do');
var ourWork = jQuery('#our-work');
var caseStudies = jQuery('.case-studies');
var homeLogo = jQuery('#home-logo');
var headerLogo = jQuery('#header-logo');

//scrolling animations by way of 'waypoint' jquery plugin.

var homeLogoPos = homeLogo;
var homeLogoOffset = homeLogoPos.offset();

var waypointHeaderLogo = new Waypoint({
    element: headerLogo,
    offset: function() {
            return -(homeLogo.height() + homeLogoOffset.top - 190)
        },
    handler: function(direction) {
        if (direction === 'down') {
            jQuery(this.element).addClass('scrolled');
        } else {
            jQuery(this.element).removeClass('scrolled');
        }
        Waypoint.refreshAll;
        //tried the following as well, no luck
        Waypoint.disableAll();
        Waypoint.enableAll();
    }
})

var waypointWhatWeDo = new Waypoint({
    element: whatWeDo,
    offset: '99%',
    handler: function(direction) {
        if (direction === 'down') {
            whatWeDo.addClass('scrolled');
        } else {
            whatWeDo.removeClass('scrolled');
        }
        Waypoint.refreshAll(); //causes an error 
    }
})

var waypointHomeCircles = new Waypoint({
    element: homeCircles,
    offset: '99%',
    handler: function(direction) { 
        if (direction === 'down') {
            homeCircles.addClass('scrolled');
        } else {
            homeCircles.removeClass('scrolled');
        }
        Waypoint.refreshAll;
    }
})

var waypointHomeCircles2 = new Waypoint({ 
    element: homeCircles,
    offset: '99%',
    handler: function(direction) {
        if (direction === 'down') {
            ourWork.addClass('scrolled');
        } else {
            ourWork.removeClass('scrolled');
        }
        Waypoint.refreshAll;
    }
})

var waypointsCaseStudies = new Waypoint({
    element: caseStudies,
    offset: '99%',
    handler: function(direction) { 
        if (direction === 'down') {
            caseStudies.addClass('scrolled');
        } else {
            caseStudies.removeClass('scrolled');
        }
    }
})

注意：当我使用 Waypoint.refreshAll()（带函数括号）时出现堆栈错误。

任何关于如何正确使用 refreshAll() 的指示将不胜感激。

Answer 1

终于在 jQuery Waypoints Refresh with CSS Transition 上找到了解决方法问题是我的 .scrolled class 包含 CSS 转换，需要在 waypoints 刷新之前完成所有（）另外，您似乎不应该在处理程序中调用 refreshAll() 。事后看来很明显，但文档没有具体提及。希望对某人有所帮助

waypoints（多个）； refreshAll 不工作

waypoints (multiple); refreshAll not working

jquery

jquery-waypoints