欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

解决顶部导航覆盖锚点定位到的内容的问题---锚点定位偏移

程序员文章站 2022-06-18 11:17:00
...

页面中有很多不同的模块,有时候会需要利用锚点,将其定位到想跳转到的位置。只是,顶部的固定导航栏,会覆盖掉一部分想要展示的内容。

如下图所示

解决顶部导航覆盖锚点定位到的内容的问题---锚点定位偏移


采取的一种较为简单的方法,就是利用伪类:target,其用来指定那些包含片段标识符的URI 的目标元素。通过其,可以对跳转后的目标元素的样式做一定的调整。

当需要对所有目标元素做调整,则可以用

:target{

}

我个人的页面,用的如下代码

/*解决锚点的偏移问题*/
#anchorKv:target,#anchorSize:target,#anchorScene:target,#anchorModel:target,
#anchorDetail:target,#anchorColor:target,#anchorLaw:target,#anchorIntroduction:target,#anchorService:target{
  padding-top:64px;
}

这样,点击后跳转到对应的文档内容,就会自动在上面加上一段距离,以避开顶部的导航栏。点击不同的跳转,都不会被遮挡住。

解决顶部导航覆盖锚点定位到的内容的问题---锚点定位偏移