固定 header 的偏移锚点，但保持 perma link 完整

Question

在我的 WordPress 中添加了一些代码，使其能够向所有 h2 标题添加锚点 link。此外，当它悬停时，它会在每个标题前面显示一个小的链标志。

这是它的样子：

这是我的 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;
}

但是，我的页面确实有一个固定的导航 header，所以锚 link 需要一点偏移。否则，我的文本内容隐藏在固定 header.

下方

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

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

不幸的是，链条徽标现在向上移动并显示在其原始位置上方 125 像素处。我怎样才能同时获得标题前面的连锁标志和125px offset以应对固定的header？

我的实现大致基于 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;
}

固定 header 的偏移锚点，但保持 perma link 完整

Offset anchor for fixed header, but keep perma link intact

html

css

wordpress

anchor

offset