导航栏到达窗口顶部后，如何将其保留在那里？

Question

这是一个示例 js fiddle。导航栏位于“Hello World”部分的正下方，然后内容位于该导航栏下方。有没有一种方法，当向下滚动查看内容时，一旦导航栏到达窗口顶部以将其保留在那里？因此，一旦到达顶部，它就会保持固定在顶部。无论您向下滚动多远，它都不会滚动到页面之外，但一旦到达那里就会自行固定到顶部。有什么帮助吗？非常感谢！

jsfiddle：http://jsfiddle.net/Ptx4e/

这是 js fiddle 的 css：

#head{
   width:100%;
   height:200px;
}

h1{
    text-align:center;
    padding-top:70px;
}

nav{
    background-color:black;
    overflow:hidden;
    width:100%;
}

nav ul{
    color:white;
    list-style:none;
    text-align:center;
    margin:0;
}

nav ul li{
    display:inline-block;
    padding:1% 6%;
}
nav ul li:hover{
    background-color:tomato;
}

Answer 1

一点点jquery就可以实现sticky header。检查DEMO。

这是 jquery 代码。

  $(window).scroll(function () {

    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });