Переключить вращение div с помощью jQuery

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

Как вы можете видеть, когда вы выделите в нижней части страницы, круг ДИВ переворачивается на 180 градусов и указывает назад вверх. Ну, когда пользователь прокручивает резервную копию (где-то над последней областью), я бы хотел, чтобы он откинулся назад (иначе стрелка не имела бы смысла).

Буду признателен за любую помощь в этом исправлении! Заранее благодарю за любого, кто помогает мне! Дайте мне знать, если вам понадобится больше кода/объяснений по этому поводу.

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/

Answer 2

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

Вы можете использовать, если заявление и наоборот, чтобы достичь этого эффекта.