jQuery Waypoints - 如何在每次页面滚动且元素处于 View 中时触发操作？

Question

我有一个对象，每当用户滚动页面并且该对象当前处于 View 中时，我都希望旋转该对象。

因此，如果首次加载网站时我的对象位于页面中间，我希望它在用户向下滚动时“向右”旋转。当用户向上滚动时，它将“向左”旋转。

我不知道如何让它在对象出现在 View 中时旋转，而不仅仅是当 View 顶部被对象击中时。我使用 jQuery Waypoint 来检测滚动，并使用 jQuery Transit 来为我的对象设置动画。 :

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
});

Answer 1

这就是航点中的offset选项的用途。如果您希望整个元素都在 View 中(在视口(viewport)的底部)，您可以使用值“bottom-in-view”:

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
}, {
    offset: "bottom-in-view"
});