您的位置：首页 > Web前端 > JavaScript

javascript实现页面悬浮导航

2016-05-12 19:25 585 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a{
text-decoration: none;
}
#suspendNavigation{
position:absolute;
top: 0px;
left:0px;
background-color: #ccc;
width: 100%;
z-index: 1000;
}
#suspendNavigation div{
float: left;
position: relative;
border: #cc2123 1px solid;
width:19%;
height:30px;
text-align: center;
line-height: 30px;
}
body{
height: 2000px;
}
</style>
</head>
<body>
<div id="suspendNavigation">
<h2>页面悬浮导航</h2>
<div>
<a href="" target="_blank">导航1</a>
</div>
<div>
<a href="" target="_blank">导航2</a>
</div>
<div>
<a href="" target="_blank">导航3</a>
</div>
<div>
<a href="" target="_blank">导航4</a>
</div>
<div>
<a href="" target="_blank">导航5</a>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//获取待定位的元素
var suspendNavigation=document.getElementById("suspendNavigation");
window.onscroll=function(){
//alert("test1");
//alert(suspendNavigation.style.top);
//alert(document.body.scrollTop);
//alert(document.documentElement.scrollTop);
//suspendNavigation.style.top=document.body.scrollTop+"px";
suspendNavigation.style.top=(document.documentElement.scrollTop||document.body.scrollTop)+"px";

}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航