滚动后重新定位DIV(Reposition DIV after scrolling)

我有向下滚动后重新定位导航栏。 它的工作原理与位置：固定的，但在滚动我希望它动起来像所有下面的网站上的其他内容。 我的用户停止滚动应该重新定位在最前面：

下面有一个演示：

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); 节控制下动画速度的幻灯片。

检查的jsfiddle演示

文章来源: Reposition DIV after scrolling