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

<分区>

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

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

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

body {
    padding-top: 70px;
}

问题是，当我单击菜单项导航到某个部分时，例如 #About然后该部分的顶部被切掉。

jsFiddle

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

最佳答案

如本 answer 中所述，问题是，您的浏览器总是希望将您的 anchor 滚动到窗口的确切顶部。如果您将 anchor 设置在文本实际开始的位置，它将被菜单栏遮挡。

相反，将容器的 padding-top 设置为您想要的偏移量，并将容器的 margin-top 设置为padding-top 的相反。现在容器的 block 和 anchor 从页面的正上方开始，但里面的内容直到菜单栏下方才开始。

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

关于html - 导航到#id 时，元素隐藏在固定位置标题下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18948440/