css锚点定位被顶部固定导航栏遮住的解决方案


前言

最近给博客添加了文章TOC功能,实现了文章目录的展示,并支持标题跳转。但是遇到了一个问题。跳转后的标题直接跳到了屏幕顶端,而屏幕顶端刚好有一固定的导航栏,这样导航栏就把标题遮挡住了,影响美观。于是想给锚点的跳转加一个偏移量,网上搜索了一番,很多都是使用js来解决,比较麻烦。这里分享一个很简单的方法

解决方案

使用padding+margin,padding影响锚点元素的定位,margin不影响锚点元素的定位。所以使用padding调整锚点元素跳转后的位置,使用margin抵消padding对布局的影响。
示例:

<h3 class="first" id="maodian">
跳转到这里
</h3>

.first {
    padding-top: 50px; /* 50px是导航栏高度 */
    margin-top: -50px;
}

优点

此方案无需添加额外的元素,直接使用 css 可解决问题。

缺点

当标题的文档层级和段落的文档层级不一致时会导致遮盖其他元素。

锚点跳转过渡

可以使用cssscroll-behavior实现锚点跳转的动画效果。

语法:scroll-behavior有两个属性值,默认auto
auto:滚动框立即滚动
smooth:实现平稳的滚动

html {
    scroll-behavior: smooth;
}

已有 3 条评论

    only 游客

    49 天前 安卓  回复

    厉害!学习了!!谢谢站长提供资料

      南玖 作者

      49 天前 Win10  回复

      南玖 作者

      49 天前 Win10  回复

https://file.ztongyang.cn/yang/picttures/QQqr.jpg https://file.ztongyang.cn/yang/picttures/wechatqr.png https://metu.ztongyang.cn/a/avatar.jpg avatar

南玖

生命不息,折腾不止

  网站咨询
  •   当前在线1人
  •   加载耗时29 ms
  •   文章数目40篇
  •   分类总数10个
  •   评论总数46条
  •   站点字数3.84 W
  •   运行时间12天
  访问信息
  •   
  •   2020-08-06 06:30:53 Thu
  •   ?浏览器
  •   操作系统
  热门文章