jQuery固定页眉滑下滚动问题

Question

我是jQuery的新手，请不要做出严格的判断。当我滚动页300 page时，我希望标题变得固定。如果<300 if，则移除固定。我想把它动画化，向下滚动时向下滑动，当我滚动顶部时向上滑动。像这样的一些网站，向下滚动，你会看到我想要的。

我的html就像那样

<div class="heading-wrapper">
<a href="#">1 </a>
<a href="#"> 2</a>
<a href="#"> 3</a>
<a href="#">4</a>
<a href="#">5</a>    
</div>

Css

.heading-wrapper {
width: 100%;
height: 65px;
background: #000;
position: relative;
}

.heading-wrapper.fixed {
position: fixed;
top: -80px;
left: 0;
right: 0;
}

和jQuery

$(window).scroll(function() {
if ($(this).scrollTop() > 300){  
$('.heading-wrapper').addClass("fixed");
$('.heading-wrapper.fixed').animate({'top' : '0px'}, 800);
  }
  else{
$('.heading-wrapper.fixed').animate({'top' : '-80px'}, 800);
setTimeout(function(){
    $('.heading-wrapper').removeClass("fixed");
    },800); 
  }
});

它不像我想要的那样工作。

1. 如果按下鼠标滚动，它就不会有生命。
2. 动画只会立刻出现。
3. 幻灯片动画永远不会出现..。
4. 如果我快速上下滚动，整个结构会崩溃，必要时不会添加样式))

请帮助我解决这个问题，记住，不要严格判断！)

JsFiddle链路

Answer 1

演示

js

$(document).ready(function () {
    $("header").before($("header").clone().addClass("animateIt"));
    $(window).on("scroll", function () {
        $("body").toggleClass("down", ($(window).scrollTop() > 100));
    });
});

css

body, html {
    margin:0;
    padding:0;
}
header {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #000;
    color: #fff;
}
header.animateIt {
    position:fixed;
    top:-60px;
    left: 0;
    right: 0;
    z-index:999;
    transition:0.4s top cubic-bezier(.3, .73, .3, .74);
}
body.down header.animateIt {
    top:0;
}
.content {
    padding: 0 20px 20px;
    background: #fff;
    line-height: 1.5;
    color: #333;
}

html

<header>
    <a href="#">1 </a>
    <a href="#"> 2</a>
    <a href="#"> 3</a>
    <a href="#">4</a>
    <a href="#">5</a>    
</header>

Answer 2

我会这么做的。

首先，根据所支持的浏览器，可以添加以下CSS：

.heading-wrapper {
   position: fixed;
   top: -80px;
   transition: top 1s linear; /*as you wish*/
   [...]
}

.heading-wrapper.relative {
    position: absolute;
    top: 0px;
}

.heading-wrapper:not(.relative).fixed {
    top: 0px;
}

然后在Javascript中：

var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;

$wrapper.clone().appendTo("body").addClass("relative");

$win.scroll(function () {
   top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
   if( top > 300)
       setTimeout(function(){$wrapper.addClass("fixed");},0);
   else if( $wrapper.hasClass("fixed") )
      setTimeout(function(){$wrapper.removeClass("fixed");},0);
});

我更新了你的JSFiddle。

编辑:添加了一个克隆菜单，绝对。