html - 一旦导航栏到达窗口顶部，如何将其保持在那里？

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 就可以实现粘性 header 。检查 DEMO .

这里是 jquery 代码。

  $(window).scroll(function () {

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