添加填充到ID链接但不显示填充

Question

我的页面上有目录链接到页面上的ID，但是当我点击ID时，我有一个粘贴的标题覆盖了一些ID内容，我需要在ID中添加填充以推送内容向下通过粘性导航，但如果我这样做会有很大的空间，那么我怎么能让ID链接停止页面大约比ID内容高50px或100px？

如果您访问我的页面http://stormable.com/heroes/kerrigan/#abilities，您会看到导航覆盖了#abilities div的最顶层。

<ul>
<li>#abilities</li>
<li>#talents</li>
</ul>

<div id="abilities">
Content
</div>

<div id="talents">
Content
</div>

所以当你点击异能时它会把你带到能力id的最顶层，我知道我可以只添加填充到能力的顶部但是我不想因为它会把它推到很远的地方来自其他内容。

Answer 1

你应该查看javascript以解决这类问题。

但这是一个解决方案：

#abilities{
    padding: 50px 0 0;
    margin: -50px 0 0;
}

它会完成这项工作。 （对所有部分都这样做）