JS实现移动底部导航栏!

代码截取自太平洋网站的产品比较页面

1. <style type="text/css">
2. <!--
3. #master{ margin:0 auto;width:988px;position:absolute;left:center;top:780px;z-index:999;background:#ebd7a2;height:28px;filter:alpha(opacity=80); /* IE */    -moz-opacity:0.8; /* Moz FF */opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/}
4. #master table{ width:988px; text-align:center;}
5. -->
6. </style>

以上CSS定义了div  #master

1. <script language="JavaScript">
2. var oldPosition = 0;
3. function flow() {
4.     var scrollPos;
5.     var cHeight;
6.     
7.     if (typeof window.pageYOffset != 'undefined') {
8.        scrollPos = window.pageYOffset;
9.        cHeight=document.documentElement.clientHeight;
10.     }
11.     else if (typeof document.compatMode != 'undefined' &
12.          document.compatMode != 'BackCompat') {
13.        scrollPos = document.documentElement.scrollTop;
14.        cHeight=document.documentElement.clientHeight;
15.     }
16.     else if (typeof document.body != 'undefined') {
17.        scrollPos = document.body.scrollTop;
18.        cHeight=document.body.clientHeight;
19.     }
20.     var a=scrollPos+cHeight-document.getElementById("master").offsetHeight;
21.     if(a!=oldPosition){
22.         document.getElementById("master").style.top = a+'px';
23.         oldPosition = a;
24.     }
25. }
26. window.setInterval("flow()",1);
27. </script>

 

1. <div id="master">
2. 导航栏内容
3. </div>