固定标头的偏移锚点，但保持perma链接不变

Question

为我的WordPress添加了一些代码，使其添加到所有h2标题的锚链接。此外，它在每个标题前面显示一个小链标志，当它悬停时。

这就是它的样子：

这是我的HTML标记：

<h2 id="contact">
  <a class="anchor" href="#contact">
    <i class="fa fa-link" title="Permalink"></i>
  </a>
  Contact us
</h2>

这就是CSS：

h2 a.anchor {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -25px;
  padding: 0.75em 8px 0.75em 4px;    
  font-size: 18px;
  font-size: 1rem;
  line-height: 1;
  color: #CCCCCC;
  display: none;
}

h2:hover a.anchor {
  display: block;
}

但是，我的页面确实有一个固定的导航标题，因此锚链接需要一点偏移量。否则，我的文本内容将隐藏在固定标题下方。

我添加了这段代码，以实现偏移：

h2:before {
  display: block;
  content: " ";
  height: 125px;
  margin-top: -125px;
  visibility: hidden;
}

不幸的是，链徽标现在向上移动并显示在其原始位置上方125px处。如何同时获取标题的前缀和125px 偏移的链徽标以应对固定标题？

我的实施基于this article，但不幸的是今天已经失效。

Answer 1

这应该适合你。

（Demo）

HTML

<div class="anchor-wrapper" id="contact">
    <h2>
        <a class="anchor" href="#contact">
            <i class="fa fa-link" title="Permalink"></i>
        </a>
        Contact us
    </h2>
</div>

CSS

h2 {
    margin: 0px;
    padding: 0px;
}
a.anchor {
    font-size: 18px;
    color: #CCCCCC;
    opacity: 0;
    margin-left: -1.2em;
    width: 1em;
}
h2:hover a.anchor {
    opacity: 1;
}
.anchor-wrapper:before {
    display: block;
    content:" ";
    height: 125px;
    margin-top: -125px;
}