position: sticky;固定头部的导航（配合top值使用）

最新推荐文章于 2023-11-21 11:27:20 发布

原创最新推荐文章于 2023-11-21 11:27:20 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用CSS的sticky属性实现固定头部导航的方法。通过设置position:sticky和top:20px, 导航栏会固定在页面顶部，当滚动到特定位置时保持可见。示例代码展示了如何在HTML中组织元素并应用此样式。

前言：固定头部的导航

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <title>固定头部的导航</title>
    <style>
    	.item1{
    		height: 200px;
    		border: 1px solid red;
    	}
    	.item2{
    		height: 1000px;
    		border: 1px solid red;
    	}
    	nav{
    		position: sticky;
    		top: 20px;
    	}
    </style>
</head>
<body>
	<div class="item1">11</div>
	<nav>这里是导航</nav>
	<div class="item2">22</div>
</body>

</html>