我正在使用带有固定在页面主体顶部的全局导航栏的 Bootstrap。
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">MyBrand</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#>Page 1</li>
<li><a href="#>Page 2</li>
<li><a href="#>Page 3</li>
</ul>
</div>
</div>
</div>
</div>
我在正文顶部添加了一个 40px 的边距,以便底部的页面内容顶部不会被导航栏覆盖。
body {
background-color: #f5f5f5;
position: relative;
margin-top: 40px;
}
到那里为止,一切正常。我还使用内部锚点来简化页面内的导航,使用 Twitter 与 Bootstrap 文档中的 affix 组件使用的相同机制,使用户能够跳转到页面内的不同部分(参见http:// twitter.github.com/bootstrap/getting-started.html)
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
[...]
<section id="section1">
[...]
[...]
[...]
</section
<section id="section2">
[...]
[...]
[...]
</section
<section id="section3">
[...]
[...]
[...]
</section>
我的问题是当用户点击时,浏览器将目标粘贴到屏幕的最顶部,内容消失在导航栏下。我注意到 Twitter 使用了一个技巧,目标<section>
标签包括“padding-top: 30px;”,最接近的标签包括<h1>
“margin-top: 10px;” CSS 指令,以便将文本显示在屏幕顶部下方 40 像素处。
我不能让我在每个部分之间“丢失”40px,我的显示器必须保持紧凑。我的问题是:有没有办法让内部锚不粘在屏幕视图的最顶部,而是远离屏幕顶部任意长度?