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

最新推荐文章于 2024-07-03 16:58:30 发布

xiaoma121212

最新推荐文章于 2024-07-03 16:58:30 发布

阅读量271

点赞数

分类专栏： CSS 文章标签： css

原文链接：https://blog.csdn.net/dongsdh/article/details/80933181

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

转载于：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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaoma121212

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position:sticky；制作导航吸顶效果

<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> <title>固定头部的导航</title> <style> .item1{ height: 200px; border: 1px solid red; } .item2{ height
复制链接

扫一扫