javascript - 滚动窗口上的动画菜单栏

Question

假设我有一个像这样的导航 div:

  #navigation {
      position:fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 80px;
      background-color: #FFF;
      z-index:999;
      padding-top: 25px;
      padding-left: 45px;
  }

如果用户滚动，我希望将其表现得像 position:absolute 一样，以便它消失在浏览器窗口的顶部。但经过短暂的延迟后，我希望它从顶部滑回到原来的位置。我怎样才能用JS实现这个？

谢谢!

Answer 1

试试这个:

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

您可以更改.delay(1000)来更改延迟时间。
isInAction 变量的定义是为了防止不断滚动时重复动画。

<强> Check JSFiddle Demo

更新:

如果您想限制此操作仅在向下滚动时，请修改如下代码:

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

<强> Check JSFiddle Demo