javascript - jQuery 固定 header 在滚动问题上向下滑动

Question

我是jQuery新手，请不要严格判断。当我滚动页面 300px 时，我希望标题固定。如果 <300px，则删除 fixed。我想为它设置动画，向下滚动时向下滑动，向上滚动时向上滑动。像这样的 Some site, scroll down and you'll see what I want.

我的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 link

Answer 1

Demo

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>