JQuery: Использование scrollTop для создания анимированного липкого меню

Question

Я пытаюсь создать анимированное липкое меню.

Пользователь загружает страницу, и навигационная система находится в неподвижном состоянии. Затем пользователь прокручивает страницу вниз и, как и 500 пикселей (прокрутка над исходной навигацией), навигационная система анимируется на странице, прикрепленной вверх, используя фиксированное позиционирование.

У меня есть работа сейчас (см. Код: http://codepen.io/chrisyerkes/pen/uoFKl), однако, как только я прокручу резервную копию, и она сбрасывает позицию меню, при следующем прокрутке страницы она больше не будет анимировать, просто встанет на место. Я хочу, чтобы он анимировался, как при первом загрузке/прокрутке страницы.

Похоже, что атрибут style = "top: 0px" не удаляется при прокрутке страницы вверх, которая может вызвать проблему. Я попытался использовать removeAttr(), чтобы избавиться от него при прокрутке по возврату, но он продолжает выскакивать назад, когда он удаляется (автоматически).

Любые идеи были бы очень оценены. Спасибо!

Answer 1

Я немного обновил ваш код, и теперь он работает так, как ожидалось. У этого есть преимущество, что он срабатывает всего один раз, если это необходимо, а не постоянно. Я также сохранил селектор в переменной, чтобы избежать много повторного запроса.

JavaScript

var nav = $('.nav'); 
var scrolled = false; 

$(window).scroll(function() { 

    if (500 < $(window).scrollTop() && !scrolled) { 
     nav.addClass('visible').animate({ top: '0px' }); 
     scrolled = true; 
    } 

    if (500 > $(window).scrollTop() && scrolled) { 
     nav.removeClass('visible').css('top', '-30px'); 
     scrolled = false;  
    } 
}); 

Demo

Try befory buy