Question

这是一个js小提琴样本。导航栏位于＆＃34; Hello World＆＃34;部分的正下方，然后内容低于该导航栏。有一种方法，当向下滚动以查看内容时，一旦导航栏到达窗口顶部以保持它在那里？所以它一旦到达顶部就会保持固定在顶部。无论你向下滚动多远，它都不会滚动页面，但一旦它到达那里就会固定在顶部。有帮助吗？非常感谢！

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

这是js小提琴的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你可以实现粘性标题。检查 DEMO 。

这是jquery代码。

  $(window).scroll(function () {

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

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

1 个答案: