固定标头的偏移锚点,但保持永久链接不变

用户名

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

不幸的是,锁链徽标现在向上移动,并显示在其原始位置上方125像素处。如何获得标题前面的链标志和125px的偏移量以应付固定的标题?

根据本文我的实现是失败的,不幸的是,今天文档已失效

用户名

这应该为您工作。

演示

的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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

偏移固定标头的锚点部分

来自分类Dev

固定标头影响锚点

来自分类Dev

滚动到固定标题的锚点位置

来自分类Dev

根据固定标头的高度偏移内容的上边距

来自分类Dev

根据固定标头的高度偏移内容的上边距

来自分类Dev

如何在React中偏移链接和锚点?

来自分类Dev

使固定标头的水平滚动位置与主体保持同步

来自分类Dev

固定标头的值

来自分类Dev

带有引导程序的固定标题和分段锚点

来自分类Dev

重叠动态固定标头

来自分类Dev

从其他页面链接时,如何偏移锚以调整固定页眉?

来自分类Dev

高度固定的CSS固定标头

来自分类Dev

标头位置保持不变

来自分类Dev

链接未引用锚点

来自分类Dev

使用CSS的HTML表固定标头

来自分类Dev

在固定标头之后添加元素

来自分类Dev

200滚动后的jQuery固定标头

来自分类Dev

关于MQTT固定标头结构?

来自分类Dev

固定标头引导程序的位置

来自分类Dev

PhoneGap上的jQuery移动固定标头

来自分类Dev

如何使用SlickNav制作固定标头

来自分类Dev

使用CSS的HTML表固定标头

来自分类Dev

使固定标头看起来持久

来自分类Dev

GridView固定标头溢出容器

来自分类Dev

平稳滚动的固定标头帐户

来自分类Dev

HTML固定标头失败ID使用

来自分类Dev

使点击的链接颜色保持不变

来自分类Dev

调整大小时保持固定的div不变

来自分类Dev

调整大小时保持固定的div不变