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 回答