CSS实现导航栏顶部固定的方法介绍

发布时间：2023-12-16 10:19:26 所属栏目：语言来源：DaWei

导读： 导航栏顶部固定的效果在很多网站上都能看到，这样的好处就是方便用户搜索和跳转到其他页面，而实现这一效果的方法很多。这篇文章主要介绍用CSS实现的方法，下文还介绍了它们的优缺点，感

导航栏顶部固定的效果在很多网站上都能看到，这样的好处就是方便用户搜索和跳转到其他页面，而实现这一效果的方法很多。这篇文章主要介绍用CSS实现的方法，下文还介绍了它们的优缺点，感兴趣的朋友就继续往下看吧。

这里实现的导航栏顶部固定的效果，同时为了方便用户浏览长文档，会加上目录，点击段落标题跳转到段落所在的位置，

如果使用锚点实现目录的跳转会遇到 fixed 导航栏遮住了标题的问题。

1. 锚点定位机制

如果没有滚动条，锚点失效。

如果有滚动条，滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素padding-box上边缘位置。

2. 解决方案

（1）padding+margin

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

<h3 class="heading first" id="first">
1.出现的时间、地点不同
</h3>
.first {
padding-top: 60px;/* 60px是导航栏高度 */
margin-top: -60px;
}

优点

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

缺点

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

例如：标题使用了 relative 定位提升了文档层级。会出现鼠标无法选中标题上方被布局遮挡的段落，从而导致无法复制文档。

（2）用span或a标签作为锚点元素

非替换内联元素的padding不影响布局，但可以影响锚点位置。

<h3 class="heading">
<span id="second" class="title_placeholder">
2. require/exports 是运行时动态加载，import/export 是静态编译
</span>
</h3>
.title_placeholder {
padding-top: 60px;
}

（3）:target伪类

:target CSS 伪类代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配 .
<h3 id="forth" class="heading">4. 用法不一致</h3>
:target {
padding-top: 60px;
margin-top: -60px;
}

此方案和方案（1）有异曲同工之妙，当跳转到某个（类）锚点时，锚点元素应用 :target 样式。

关于CSS实现导航栏顶部固定的方法就介绍到这，上述分享了好几种方法，还分析了它们使用的缺点，有需要的朋友不妨看看这篇，对大家学习CSS有一定的参考价值。

（编辑：大连站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!