Bootstrap:锚和身体上边距/填充

Question

我正在使用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文档中的词缀组件一起使用的相同机制,使用户能够跳转到页面中的不同部分(请参阅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>标签包括"填充顶部:30px;",最接近的<h1>包括"margin-top:10px;" CSS指令使文本显示在屏幕顶部正下方40px处.

我不能让我在每个部分之间"失去"40px,我的显示器必须保持紧凑.我的问题是:有没有办法让内部锚点不要粘在屏幕顶部的顶部,而是要保持远离屏幕顶部的任意长度？

Answer 1

最后,我想出了如何轻松解决这个问题:

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

section {
    padding-top:40px;
    margin-top:-40px;
}

这意味着在主体顶部添加了40px的边距,在截面的顶部添加了40px的填充,还添加了负40px的边距以便向上移动它们各自的预期位置,从而引入了一个无形的边距.浏览器在单击锚点后将显示绘制到一个部分.

希望这有帮助.

Answer 2

要使其滚动到正确的位置并在滚动页面时使所选菜单项正确,您需要padding-top: 40px;在锚点上设置,并设置锚点的margin-bottom: -40px;上一个兄弟.

您可以使用JS片段实现此目的,该片段将从导航菜单中找到元素并应用样式更改.

$("header .nav a[href!=#]").each(function(){
    $($(this).attr("href")).css("padding-top", "40px").prev().css("margin-bottom", "-40px");
});