Анимация значений при прокрутке

Question

Я работаю на простой одностраничный сайт. Вы можете перемещаться, щелкая по ссылкам внутри фиксированной навигации. Эта фиксированная навигационная система должна работать, как показано здесь: http://www.teehanlax.com/story/medium/

Что-то вроде Tehann/Lax (фиксированная навигация, которая отображается только при прокрутке вверх и исчезает при прокрутке вниз), я, вероятно, мог бы сделать это самостоятельно. Но я хочу немного изменить этот пример, поэтому он работает, как видно на этом сайте: http://nzopera.com/2013/don-giovanni

В этом примере навигация работает, как на сайте Tehann/Lax, но отличается. Он не только оживляет, но появляется/исчезает, но реагирует на вашу прокрутку. Я думаю, что лучше всего взглянуть на последнюю страницу, которую я записал здесь, чтобы понять мое намерение. Как я могу добиться такого эффекта? Я знаю, как определить, прокручиваете ли вы вверх или вниз, смотрите мой текущий код. Но я не совсем уверен в анимации в зависимости от вашей позиции прокрутки.

Заранее за вашу помощь.

Пожалуйста, проверьте мой ответ на это сообщение, я попытался описать, что мне нужно немного подробнее.

EDIT: Это то, что я получил до сих пор, но это только с нормальной анимации JQuery

$(function(){ 
    var 
     scrollTop = 0, 
     lastScrollTop = 0, 
     delta = 50; 

    $(window).scroll(function(event){ 
     scrollTop = $(this).scrollTop(); 

     if(Math.abs(lastScrollTop - scrollTop) <= delta) 
      return; 

     if (scrollTop > lastScrollTop){ 
      if($(".header").hasClass("header--active")) $(".header").removeClass("header--active").animate({ top : -84 }); 
     } else { 
      if(!$(".header").hasClass("header--active")) $(".header").addClass("header--active").animate({ top : 0 }); 
     } 
     lastScrollTop = scrollTop; 
    }); 
}); 

Answer 1

Как вы пометили JQuery, вы можете отображать текст на событие прокрутке

что-то вроде:

$(window).scroll(function(e){ 
    //do stuff here 
}); 

Если вы хотите, чтобы сделать вид, в определенный момент, как навигации на сайте вы Линк d, просто создать флаг, как показано ниже, например:

$(window).scroll(function() { 
var ypos = window.pageYOffset; 
var scroll_pos = 200;    

if(ypos > scroll_pos) { 
    //do stuff here 
} 
}); 

Смотрите здесь для более подробной информации: http://api.jquery.com/scroll/