纯css导航菜单滚动吸附顶部效果_CSS学习

来源：网络整理时间：2023/3/4 1:23:15 共 3587 浏览

纯css就可以达到效果了，但要注意兼容性的问题

<!doctype html>    
<html>    
<head>    
<meta charset="utf-8">    
<title>纯css实现吸顶效果-jq22.com</title>    
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>    
<style>    
.header {    
	width:100%;    
	height:160px;    
	background:#87CEEB;    
}    
nav {    
	width:100%;    
	height:100px;    
	position:sticky;    
	top:0px;    
	background:#F98202;    
}    
.content {    
	width:100%;    
	background:blue;    
	height:1000px;    
}    
footer {    
	background:#87CEEB;    
}    
</style>    
</head>    
<body>    
<div class="header">    
</div>    
<nav>    
用于显示粘性定位的头    
</nav>    
<div class="content">    
</div>    
<footer>    
底部    
</footer>    
<script>    
</script>    
</body>    
</html>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：html替换标签中的字符，html中的font是什么作用？_html标签 | ·下一条：打开网页后简单广告框弹窗两种方法实现纯代码_网页特效