Reposition DIV после прокрутки

Question

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

Heres демо:

http://jsfiddle.net/gvjeyywa/7/

Но я хочу, чтобы это было положение: абсолютное (особенно для скроллинга на Ipad) http://jsfiddle.net/gvjeyywa/5/

Как я могу позволить JS переопределить мой CSS? Вот мой JS:

var isInAction = false; 
    var lastScrollTop = 0; 
    $(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
    if (!isInAction){ 
     isInAction = true; 
     $("#navigation").animate({ 
      top: "-" + $("#navigation").innerHeight() + "px" 
     }).delay(1000).animate({ 
      top: "0px" 
     }, 800, function() { 
      isInAction = false; 
      }); 
     } 
     } 
    lastScrollTop = st; 
}); 

Answer 1

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

var bitFlag = false; 
var lastScrollTop = 0; 
var timeoutId; 
$navigation = $("#navigation"); 
$(window).scroll(function (event) { 
    var intWindowTop = $(window).scrollTop(); 
    var intElementBottom = $navigation.offset().top + $navigation.innerHeight(); 
    if (intWindowTop > lastScrollTop) { 
     if (!bitFlag) { 
      $navigation.css("position", "absolute").css("top", intWindowTop + "px"); 
      bitFlag = true; 
     } 
     if (timeoutId) { 
      clearTimeout(timeoutId); 
     } 
     timeoutId = setTimeout(function() { 
      if (intWindowTop > intElementBottom) { 
       intDelayTime = setTimeout(function() { 
        $navigation.animate({ 
         top: intWindowTop + "px" 
        }, 800); 
       }, 500); 
      } 
     }, 100); 
    } else { 
     $navigation.css("position", "fixed").css("top", "0px"); 
     bitFlag = false; 

    } 
    lastScrollTop = intWindowTop; 
}); 

}, 500); блока управления Временем задержки в миллисекундах и управление }, 800); раздела слайда вниз скорость анимации.

Check JSFiddle Demo