jquery - 使用 jQuery-One-Page-Nav 的 Bootstrap 固定 header

Question

我正在使用 Twitter Bootstrap 。

我已将此添加到我的页面，使导航栏与滚动条一起移动。 <div class="nav-collapse collapse **navbar-fixed-top**">

但我似乎无法使用 css 将其重新放置到位。您可以通过删除 position:fixed 来查看我想要的位置.

第二个问题是，当滚动页面时，关于我在哪个部分的链接应该是事件的。这不知何故不再起作用。

我正在使用 jQuery One Page Nav 插件和 Twitter Bootstrap。

Link to live site

Answer 1

默认情况下，Bootstrap 会移除平板电脑和手机的固定位置。如果你想覆盖这个，试试:

编辑

@media (max-width: 979px){

    .navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    }  

}

对于您的菜单链接，目前您有:

<a href="#section-2">Cv</a> 

链接到

 <div class="full-2">
 <div class="container-narrow">
 <div class="section" id="section-2">
 <section>
 ....

尝试将其更改为:

如果这不能解决问题，请如下移动部分 div:

 <section id="section-2">
 <div class="full-2">
 <div class="container-narrow">

 ....

更新

@media css 中的语法不太正确(我之前的错误)，你想要的是:

/*By default, Bootstrap removes the fixed position for tablets and phones*/
@media (max-width: 979px){

.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
    }
}

然后在您的 html 中，您需要向导航栏添加一个额外的类以指定您希望它附加:

<div id="top-nav" class="navbar navbar-fixed-top">  

完成后一切正常，您只需要调整下拉导航链接的样式即可。

现场观看:http://jsfiddle.net/panchroma/KbMvX/和 http://fiddle.jshell.net/panchroma/KbMvX/show/