当先锋百科网

首页 1 2 3 4 5 6 7

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

纯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>