防止固定标题重叠内容

Question

我被这个问题困住了，我有一个与主要内容重叠的响应式固定标题！

我在同一页面上使用内部/锚链接。来自导航菜单/标题链接和VERTIAL DOT NAVIGATION Jquery 插件。如果标题不与该部分的前 60px 重叠，我将无法链接到不同的部分。我一直在尝试将 margin-top: 60px; 添加到 .container 和 .section-top 类中，但没有成功。

我希望能够从导航菜单/标题链接和 jQuery 点导航链接，而标题不会与 60 像素重叠。

查看jsfiddle了解更多信息！

Answer 1

只需添加这个：

[id^="section"]{
  padding-top: 60px;
}

并删除它

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

https://jsfiddle.net/w8u2kg1j/

Answer 2

尝试使用以下 CSS，让标题仅与填充区域重叠：

section {
  padding-top:60px;
}