css属性sticky（粘性定位）固定导航

最新推荐文章于 2025-03-14 14:47:48 发布

一只前端小白

最新推荐文章于 2025-03-14 14:47:48 发布

阅读量1.5w

点赞数 14

分类专栏：日志文章标签： css3

本文链接：https://blog.csdn.net/qq_38944959/article/details/103218403

版权

日志专栏收录该内容

51 篇文章

订阅专栏

sticky（粘性定位）解释：

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。设置该属性的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

使用sticky实现固定导航头部

在以前，我们实现的主要思路就是使用js监听页面滚动事件，然后判断导航距离顶部的距离，为其动态添加position:fixed属性，这样写起来相对麻烦，并且实现的效果也不是很理想（滚动会有抖动），如果用sticky属性将变得非常容易，并且实现效果会更好。

实现代码

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
		}
		.fixed{
			line-height: 40px;
			display: flex;
			position: -webkit-sticky;
			position: sticky;/*兼容*/
			top: 0;
			left: 0;
		}
		.fixed li{
			flex: 1;
			text-align: center;
			background-color: #61b0ef; 
		}
		ul{
			padding: 0;
		}
		li{
			list-style: none;
		}
	</style>
</head>
<body>
	<ul>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第5行</li>
	</ul>
	<ul class="fixed">
		<li>tab1</li>
		<li>tab2</li>
		<li>tab3</li>
		<li>tab4</li>
	</ul>
	<ul>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
	</ul>
</body>
</html>

最终效果
一只前端小白
目前不友好的地方（兼容性）