1 <!DOCTYPE HTML>
2 <html lang="en-US">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
7 <style type="text/css">
8 .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
9 .header{height:150px;}
10 #nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
11 a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
12 </style>
13 </head>
14 <body>
15 <div class="wrapper">
16 <div class="header"></div>
17 <div id="nav">
18 <a href="#">11111</a>
19 <a href="#">22222</a>
20 <a href="#">33333</a>
21 <a href="#">44444</a>
22 <a href="#">55555</a>
23 </div>
24 </div>
25 </body>
26 </html>
27 <script type="text/javascript" src="menuFixed.js"></script>
28 <script type="text/javascript">
29 window.onload = function(){
30 menuFixed(‘nav‘);
31 }
32 </script>
方式一：
1 //js代码
2
3 function menuFixed(id){
4 var obj = document.getElementById(id);
5 var _getHeight = obj.offsetTop;
6
7 window.onscroll = function(){
8 changePos(id,_getHeight);
9 }
10 }
11 function changePos(id,height){
12 var obj = document.getElementById(id);
13 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
14 if(scrollTop < height){
15 obj.style.position = ‘relative‘;
16 //obj.style.position = ‘fixed‘;此处的fixed 与 relative取决于你初始设定的div位置有关
17 //obj.style.top = "200px";
18 }else{
19 obj.style.position = ‘fixed‘;
20 //obj.style.position =‘fixed‘;
21 // obj.style.top = "101px";
22 }
23 }
24
25 window.onload=function(){menuFixed("dh");}//调用函数
方式二：
1 //jquery 代码
2
3 $(function ()
4 {
5 var ie6 = /msie 6/i.test(navigator.userAgent)
6 , dv = $(‘#dh‘), st;
7 dv.attr(‘otop‘, dv.offset().top); //存储原来的距离顶部的距离
8 $(window).scroll(function () //scroll函数，滚动函数
9 {
10 st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
11 if (st >= parseInt(dv.attr(‘otop‘)))
12 {
13 if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
14 dv.css({ position: ‘absolute‘, top: st });
15 }
16 else if (dv.css(‘position‘) != ‘fixed‘)
17 dv.css({ ‘position‘: ‘fixed‘, top: 0 });
18 }
19 else if (st < parseInt(dv.attr(‘otop‘)))
20 dv.css({ ‘position‘: ‘absolute‘,top:500px });
21 });
22 });
时间： 2024-10-17 08:44:58