Question

每当用户滚动页面并且该对象当前处于可见状态时，我都会想要旋转一个对象。

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

我无法弄清楚当对象在视图中时如何旋转它，而不仅仅是当视图的顶部被对象击中时。我使用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

这是Waypoints中offset选项的用途。如果您希望整个元素在视图中（在视口的底部），您可以使用值"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"
});

Answer 2

对Waypoint没有太多经验，但是......你可以做这样的事情......

var win_height = $(window).height();
    var spinner_position = $('#home-spinner')

$(window).on('scroll', function() {
    var current_position = $(document).scrollTop();
    if (current_position >= spinner_position && current_position < spinner_position + win_height) {
        // spin it here
    };
});

您可能希望在网页上存储以前的位置＆amp;将current_position与其进行比较以确定用户滚动的方向。同样，您需要在重新调整大小时重新评估win_height之类的变量。我相信你会弄清楚如何在你的插件中使用它。

jQuery Waypoints - 如何在每次滚动页面时触发动作并且元素在视图中？

2 个答案: