1

因此，我试图创建一种效果，当用户滚动到页面底部时，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 并重新指向上方。好吧，当用户向上滚动（最后一个窗格上方的任何位置）时，我希望它向后翻转（否则箭头没有意义）。

我将不胜感激任何和所有的帮助来解决这个问题！提前感谢任何帮助我的人！如果您需要更多代码/解释，请告诉我。

4

2 回答 2

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/

于 2013-05-01T00:31:47.383 回答
0 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 1200) {
        $('.circle').animate({ rotate: 180 });
    } else if ($(window).scrollTop() + $(window).height() < $(document).height()) {
        $('.circle').animate({rotate:0});
    }
});

您可以使用 if 语句和相反的语句来实现该效果。

于 2013-05-01T00:34:47.153 回答