< 返回新闻公告列表

CSS实现导航栏顶部固定的方法有什么?

发布时间:2023-1-6 14:08:12    来源: 纵横云

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

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

如图所示:

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

1. 锚点定位机制

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

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

2. 解决方案

示例

(1)padding+margin

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

1.出现的时间、地点不同

.first {

padding-top: 60px;/* 60px是导航栏高度 */

margin-top: -60px;

}

优点

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

缺点

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

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

(2)用span或a标签作为锚点元素

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

2. require/exports 是运行时动态加载,import/export 是静态编译

.title_placeholder {

padding-top: 60px;

}

缺点

同方案(1)

(3)暗锚点

在需要定位的元素上方加入不影响布局的空白锚点元素。

因为锚点跳转后的位置会落在元素的padding-box上边缘,设置 height影响锚点位置,设置margin-top抵消暗锚对布局对影响。

3. require/exports 输出的是一个值的拷贝,import/export 模块输出的是值的引用

.dark_anchor {

height: 60px;

margin-top: -60px;

}

优点

不影响其他元素的鼠标选择

缺点

此方案的定位元素的margin会影响锚点跳转后的位置,和直接设置标题为锚点元素的表现不一致。

例如:标题(定位元素)有 20px 的边距,锚点跳转后20px的边距依旧保留。如果希望锚点跳转后标题置顶不受 margin影响的同学慎用此方案。

(4):target伪类

:target CSS 伪类 代表一个唯一的页面元素(目标元素),其id 与当前URL片段匹配 .

4. 用法不一致

:target {

padding-top: 60px;

margin-top: -60px;

}

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

:target浏览器兼容性:

关于CSS实现导航栏顶部固定的方法就介绍到这,上述分享了好几种方法,还分析了它们使用的缺点,有需要的朋友不妨看看这篇,对大家学习CSS有一定的参考价值、最后,想要了解更多CSS的内容,大家可以关注其它的相关文章。

文本转载自脚本之家

vx:19906048603
vx:19906048603 vx:19906048603
返回顶部
返回顶部 返回顶部