jsFiddle

Question

我有一个Bootstrap 3.0导航栏，它始终显示在页面顶部，但这可以表示position属性为fixed的任何内容。

<nav class="navbar navbar-default navbar-fixed-top" >

因为修复它会将其从文档流中取出，所以我需要在body元素中添加一些填充，以便在首次显示页面时不隐藏内容

body {
    padding-top: 70px;
}

问题在于，当我点击一个菜单项导航到某个部分时，如#About，那么该部分的顶部就会被切断。

jsFiddle

问：有没有办法添加填充，以便在导航到导航时可以看到完整的项目？

Answer 1

更新答案：

正如本answer所述，问题是，您的浏览器总是希望将锚点滚动到窗口的正确顶部。如果您将锚点设置为文本实际开始的位置，则菜单栏会将其遮挡。

相反，将容器的padding-top设置为您想要的金额偏移量，将容器的margin-top设置为对面 。现在容器的块和锚点从页面的正确顶部开始，但内部的内容直到菜单栏下方才开始。

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

jsFiddle

Answer 2

我会在正文上设置overflow: hidden并将您网站的内容添加到可滚动元素中。

您的布局应如下所示：

<html>
<head></head>
<body>
    <div class="navbar"></div>
    <div class="wrap">
        <!-- rest of content for site -->
    </div>
</body>
</html>

添加以下CSS规则：

html, body {
    overflow: hidden;
    height: 100%;
}
body {
    padding-top: 50px;
}
.wrap {
    height: 100%;
    overflow: auto;
}

导航到#id时，元素隐藏在固定位置标题下

jsFiddle

2 个答案:

更新答案：

jsFiddle

Check out my fiddle