在 HTML 中设置自定义锚点

我在帖子中看到过这个主题here https://stackoverflow.com/questions/9380034/setting-custom-anchorpoint and here https://stackoverflow.com/questions/9335942/anchor-point-positionings，但他们并没有真正帮助我。但情况非常相似：滚动页面和页面顶部的粘性菜单栏（固定 div），锚点分散在长滚动文本中。

像这样的 HTML：

<a name="hd1" class="anchor"><h1>Heading Foo</h1></a>
<p>this is some text, and a lot of it
...
<a href="#hd1">jump to Heading Foo</a>
...
<a name="hdx" class="anchor"><h1>Heading Bla</h1></a>
<p>and then there is more text
...
<a href="#hdx">jump to Heading Bla</a>    
...

一些 CSS 目前是空的，因为我仍然偶然发现这个问题

.anchor {
  color: green;
} ​

看一眼this http://jsfiddle.net/QCv27/拨弄一下看看它现在是如何工作的。

现在，每当我点击链接时，它就会带我到锚点。 （耶！）唉，这也意味着现在位于页面顶部的锚点被粘性菜单覆盖。 （不！）如果能显示出来那就太好了below粘性菜单。

我已经尝试过其他帖子中给出的解决方案，但没有成功。例如，在锚点周围添加填充实际上会在文本中添加可见的填充并创建空白空间；这不是我想要的。文本在视觉上应该看起来没有经过任何修改。

预先感谢您的提示和技巧:-)

编辑：我应该说得更清楚一点。我愿意not页面顶部需要空间。我确实需要every锚点为below菜单栏。尝试我原来的小提琴，然后单击锚点：您将看到它们的位置如何，以便它们被菜单栏覆盖。

为第一个 h1 设置填充怎么样？

​h1:first-child {
    padding-top:50px;
}