Question

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

这是我的代码

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类包含了CSS转换，需要在完成航路点刷新之前完成所有（）此外，您似乎不应该在处理程序中调用refreshAll（）。事后看来很明显，但文档并没有特别提及。希望它可以帮助某人

航点（多个）; refreshAll无法正常工作

1 个答案: