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

【问题标题】：jQuery Waypoints - How to fire action everytime the page is scrolled and the element is in view?jQuery Waypoints - 每次滚动页面并且元素在视图中时如何触发动作？
【发布时间】：2014-03-08 00:41:04
【问题描述】：

我有一个对象，当用户滚动页面并且该对象当前在视图中时，我想旋转它。

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

我不知道当对象在视图中时如何让它旋转，而不仅仅是当视图顶部被对象击中时。我正在使用 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');
    }
});

【问题讨论】：

标签： jquery jquery-waypoints jquery-transit

【解决方案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"
});

【讨论】：

【解决方案2】：

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

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
    };
});

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

【讨论】：