Javascript 使用jQuery切换div的旋转

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

你可以清楚地看到我在这里所说的：

我正在使用jQuery插件来完成这项任务：（很抱歉，它被缩小了，我就是这样发现的）

这是我到目前为止的jQuery代码：

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

如您所见，当您滚动到页面底部时，circle div翻转180并指向上。好吧，当用户向后滚动（在最后一个窗格上方的任何位置）时，我希望它向后翻转（否则箭头就没有意义）

---

我将感谢任何和所有的帮助，在得到这个修复！提前感谢所有帮助我的人！如果你需要更多的代码/解释，请告诉我

它有点不灵敏，但您可以跟踪

的“翻转”状态。圈出

并在此基础上更改您的条件

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

if（！$（'.circle'）.data（'fliped'））{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-1200）{
$（'.circle'）。设置动画（{rotate:180}）；
$（'.circle'）.data（'fliped'，true）；
}
}
否则{
如果（$（窗口）.scrollTop（）+$（窗口）.height（）<$（文档）.height（）-1200）{
$（'.circle'）。设置动画（{rotate:0}）；
$（'.circle'）.data（'fliped'，false）；
}
}

---

它有点不耐烦，但您可以跟踪

的“翻转”状态。圈出

并在此基础上更改您的条件

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

if（！$（'.circle'）.data（'fliped'））{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-1200）{
$（'.circle'）。设置动画（{rotate:180}）；
$（'.circle'）.data（'fliped'，true）；
}
}
否则{
如果（$（窗口）.scrollTop（）+$（窗口）.height（）<$（文档）.height（）-1200）{
$（'.circle'）。设置动画（{rotate:0}）；
$（'.circle'）.data（'fliped'，false）；
}
}

$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-1200）{
$（'.circle'）。设置动画（{rotate:180}）；
}else if（$（窗口）.scrollTop（）+$（窗口）.height（）<$（文档）.height（））{
$（'.circle'）。设置动画（{rotate:0}）；
}
});

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

$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-1200）{
$（'.circle'）。设置动画（{rotate:180}）；
}else if（$（窗口）.scrollTop（）+$（窗口）.height（）<$（文档）.height（））{
$（'.circle'）。设置动画（{rotate:0}）；
}
});

---

您可以使用if语句，而相反的语句可以达到这种效果。

非常感谢。这有点不雅观，但它工作得很完美，这才是最重要的！谢谢你，伙计。这有点不雅观，但它工作得很完美，这才是最重要的！