吸顶菜单

来源：互联网发布：网络显示无internet 编辑：程序博客网时间：2024/04/28 20:02

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0 auto;}
p{height:2000px;}
div{width:900px;height:500px;background:gold;}
#nav{overflow:hidden;background:#333;height:60px;margin:0 auto;width:900px;}
li{float:left;list-style:none;margin:24px;}
a{text-decoration: none;color:#fff;font-size:24px;}
</style>
<script type="text/javascript">
window.onload=function(){

window.onscroll=function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var oNav=document.getElementById('nav');
//1.方法一思路:当滚动条到浏览器窗口的距离大于0的时候就让菜单固定在顶部
// if(scrollTop>0){
// oNav.style.position="fixed";
// oNav.style.top=0;
// oNav.style.left=140+'px';
// }else{
// oNav.style.position="static";
// }

//2.方法二思路:当滚动条到浏览器窗口的距离大于菜单到窗口顶部的距离（是个固定值，不变）
// if(scrollTop>oNav.offsetTop){
// oNav.style.position="fixed";
// oNav.style.top=0;
// oNav.style.left=140+'px';

// }else{
// oNav.style.position="static";
// }

}

}
</script>
</head>
<body>
<div></div>
<ul id="nav">
<li><a href="" herf="#">小电1</a></li>
<li><a href="" herf="#">小电2</a></li>
<li><a href="" herf="#">小电3</a></li>
<li><a href="" herf="#">小电4</a></li>
<li><a href="" herf="#">小电5</a></li>
<li><a href="" herf="#">小电6</a></li>
<li><a href="" herf="#">小电7</a></li>
<li><a href="" herf="#">小电8</a></li>
<li><a href="" herf="#">小电9</a></li>
<li><a href="" herf="#">小电10</a></li>
</ul>
<p></p>
</body>
</html>

0 0