javascript - 使用 jQuery 切换 div 的旋转

Question

因此，我试图创建一种效果，当用户滚动到页面底部时，div 会旋转以使其指向上方。但是，我希望它在用户向上滚动时旋转回原来的位置。

你可以在这里看到我在说什么: http://jsfiddle.net/HHXVH/

我正在使用 jQuery 插件来完成这项任务:http://pastebin.com/vqv06HG0 (不好意思全都缩小了，我就是这么找的)

这是我目前拥有的 jQuery 代码:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1200) {
       $('.circle').animate({ rotate: 180 });
   }
});

如您所见，当您滚动到页面底部时，圆形 div 翻转 180 并指向上方。好吧，当用户向上滚动(最后一个 Pane 上方的任何位置)时，我希望它向后翻转(否则箭头将没有意义)。

对于解决此问题的任何帮助，我将不胜感激!提前感谢任何帮助我的人!让我知道您是否需要更多代码/解释。

Answer 1

它有点不合适，但您可以跟踪 .circle 的“翻转”状态并根据它更改您的条件。

if (!$('.circle').data('flipped')) {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 1200) {
       $('.circle').animate({ rotate: 180 });
       $('.circle').data('flipped', true);
    }
}
else {
    if ($(window).scrollTop() + $(window).height() < $(document).height() - 1200) {
       $('.circle').animate({ rotate: 0 });
       $('.circle').data('flipped', false);
    }
}

http://jsfiddle.net/HHXVH/1/