js.吸顶导航

版权声明:欢迎阅读,有误请指正,转载请申明。 https://blog.csdn.net/wx1995sss/article/details/87914231
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin:0;
				padding:0;
				}
			#nav_main {	
				position:"";
				width:100%;
				height:60px;
				background-color:#ccc;
			}
		</style>
		<script>
			window.onload = function(){
				var nav_main = document.getElementById("nav_main");
				var nav_top = nav_main.offsetTop;//当前对象到其	  父级顶部    的距离
				window.onscroll =function(){
					//获取当前页面滚动轴y的坐标,分别是  火狐谷歌,safari,IE
					var scrollTo = document.documentElement.scrollTOP || window.pageYOffset || document.body.scrollTOP
					if (scrollTo >= nav_top){
						nav_main.style.position = "fixed";
						nav_main.style.top = 0;
						nav_main.style.left = 0;
					}else{
						nav_main.style.position = "";
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="wrap">
			<div style="height:300px;"></div>
			<div id = "nav_main"></div>
			<div style="height:1300px;"></div>
		</div>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/wx1995sss/article/details/87914231

相关文章