如何做 - 粘性/固定导航栏
了解如何使用 CSS 创建“粘性”导航栏。
如何创建粘性导航栏
步骤 1) 添加 HTML
创建导航栏
示例
<div id="navbar">
<a href="#home">主页</a>
<a href="#news">新闻</a>
<a href="#contact">联系</a>
</div>
步骤 2) 添加 CSS
设置导航栏样式;添加 position:sticky
和 top:0
,使导航栏在达到其滚动位置时固定。
示例
/* 样式导航栏 */
#navbar {
position: sticky;
top: 0;
overflow: hidden;
background-color: #333;
}
/* 导航栏链接 */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* 页面内容 */
.content {
padding: 16px;
}
具有 position: sticky;
的元素根据用户的滚动位置进行定位。
粘性元素在 relative
和 fixed
之间切换,具体取决于滚动位置。它相对于视口中的给定偏移位置进行定位,直到达到该位置 - 然后它“粘住”在原地(就像 position:fixed)。
注意:对于粘性定位,您必须至少指定 top
、right
、bottom
或 left
中的一个。
要了解更多关于 CSS 定位的信息,请阅读我们的 CSS 定位 教程。