滚动窗口上的动画菜单栏

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 var以防止在不断滚动时重复动画。

<强> 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

Answer 2

如果使用position：absolute来定位元素，则可以使用：

var windowTop = $('body').scrollTop;

将显示窗口当前正在显示的页面顶部的偏移量。

$('#element').css('top', windowTop + 'px');

将元素设置为该位置

Answer 3

点击此链接jsfiddle查看有效示例。代码如下： 的 HTML ：

<div id='wrapper'>
    <div id='navigation'>
    </div>
</div>

<强> CSS ：

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

<强>的jQuery / JavaScript的：

$('#wrapper').bind('mousewheel',function(e){
    if ($('#navigation').is(':animated')){
        return false;
    }
    if(e.originalEvent.wheelDelta < 0) {
        $('#navigation').animate({
            top:'-' + $('#navigation').innerHeight(),
        }).delay(1200).animate({
            top: '0px',
        });
    }
});  

wheelDelta属性返回一个整数值，表示鼠标滚轮的滚动距离。负值意味着滚动鼠标滚轮。

希望它有用！