版权声明:欢迎阅读,有误请指正,转载请申明。 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>