position:sticky;制作导航吸顶效果

转载于:https://blog.csdn.net/dongsdh/article/details/80933181
sticky属性特点是在该dom对象在可是范围内,其定位属性无效,但是一旦离开其定位位置,sticky属性将会改变为Fixed定位方式。这样能够很好地处理吸顶操作。

<!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: -webkit-sticky;
			position: -moz-sticky;
			position: -ms-sticky;
			position: -o-sticky;
    		position: sticky;
    		top: 20px;
    		z-index:999;
    	}
    </style>
</head>
<body>
	<div class="item1">11</div>
	<nav>这里是导航</nav>
	<div class="item2">22</div>
</body>
 
</html>

猜你喜欢

转载自blog.csdn.net/xiaoma19941027/article/details/107354912