固定div实现,以及问题 >> document.body.scrollTop的值总为零的解决办法

来源：互联网发布：淘宝远程电脑出租编辑：程序博客网时间：2024/05/22 06:23

固定的div，下面的代码紧挨着<body>下面放上

<span id="bar" style="position:absolute; left: 0px; top: 0px; width: 100%; height:23px; zIndex:9" >  <table border='2' width='100%' height='30px' bordercolor='#FFFFFF'> <tr align="left">  <td width='100%' height='30px' bgcolor='#E0F2FF'> <a href="#" onclick="showHide()">处理流程</a>        <a href="#" onclick="goback()">返回</a>        <a href="#" onclick="impthis('${feedBackService.planid}')">导出本月计划</a>        <span id="imp"></span></td> </tr>   </table>   </span> <script language="javascript"> $(document).ready(function(){fix();});function fix(){star();}window.onscroll = function(){star();};function star(){var nome=navigator.appName; if(nome=='Netscape'){ var a=document.documentElement.scrollTop+document.getElementById("bar").offsetHeight-20;     document.getElementById("bar").style.top = a  + 'px';} else{ var a=document.documentElement.scrollTop+document.all.bar.offsetHeight-20;     bar.style.top = a; }}</script><br /><br /><br />

实例：

<html><title>JS实现的始终固定在页面底部的菜单丨芯晴网页特效</title> <head> <script language="javascript"> <!-- function stat(){ var a = pageYOffset+window.innerHeight-document.bar.document.height-0 document.bar.top = a setTimeout('stat()',2) } function fix(){ nome=navigator.appName if(nome=='Netscape'){ stat() } else{ var a=document.body.scrollTop+document.body.clientHeight-document.all.bar.offsetHeight+0 alert("aaaaa:"+document.body.scrollTop);alert("document.body.clientHeight:"+document.body.clientHeight);alert("document.all.bar.offsetHeight:"+document.all.bar.offsetHeight);bar.style.top = a }} //--> </script> </head> <body onLoad="fix()" onScroll="fix()" onResize="fix()"> <span id="bar" style="position:absolute; left:68px; top:455px; width:614px; height:45px; z-index:9" >  <table border="1" hspace="1" cellpadding="1" bordercolor="#000000" bgcolor="#FFFFFF"> <tr align="center">  <td width="190"> <a>网页特效</a></td> <td width="147"> <a>源码下载</a></td> <td width="96"> <a>链接交换</a></td>   <td width="158"> <a>生活常识</a>    </td>   </tr>   </table>   </span><br><br><br><br><br><br><br> <form><div style="height:100px;background-color: green;"></div><div style="height:100px;background-color: green;"></div><div style="height:100px;background-color: green;"></div><div style="height:100px;background-color: green;"></div><div style="height:100px;background-color: green;"></div>  <br><br><br><br><br><br><br><br>  </form></body> </html>