联通132通话详单查询 js滚动表头 原理分析

今天查了下我132手机的通话话费记录，

方法：初始你联通手机的密码，发送短信y977480x000000 到1063381234 来初始化查询的密码 977480换为你手机的后六位，000000换为你要修改的密码。发送完短信后，你会立马收到一条修改密码成功的短信。

北京用户登陆：http://www.chinaunicom.com.cn/city/beijing/index.html http://service2.10010.com/ehall/index.jsp来输入用户名：你的手机号码，密码：你刚才修改的密码。来查询。。。。

<style type="text/css">
<!--
body {
        background-image: url();
        background-color: #FFFFFF;
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
}
.headDiv{
position:absolute;
top:230px;
left:0px;
width:790px;
 }
-->
</style>

<script type="text/javascript">
        window.onscroll =function()
        {
                var t = document.body.getBoundingClientRect().top;
                window.status = t + "...." + (-t) +"px";
                var head=document.getElementById("col_head");
                if((t+document.getElementById("shiyan").offsetTop)<0)
                {
                        
                        head.style.position="absolute";
                        document.getElementById("col_head").style.top = (-t) +"px";
                }
                else
                {
                        head.style.position="";
                        //$("col_head").addClass("");
                }
        }
</script>

   <div id="shiyan"></div>
   <div id="col_head" style="left:2px; background:#EAEAEA; z-index:100; width:790px;">
     <table width="100%" height="25" border="0" cellpadding="0" cellspacing="1" bgcolor="#d9d9d9">
       <tr>
         <td width="18%" align="center" class="xdtitle">起始时间</td>
         <td width="7%" align="center" bgcolor="#d3d3d3" class="xdtitle">通话时长</td>
         <td width="7%" align="center" bgcolor="#d3d3d3" class="xdtitle">呼叫<br />类型</td>

         <td width="12%" align="center" bgcolor="#d3d3d3" class="xdtitle">对方号码</td>
         <td width="8%" align="center" bgcolor="#d3d3d3" class="xdtitle">通话地点</td>
         <td width="8%" align="center" bgcolor="#d3d3d3" class="xdtitle">通话类型</td>
         <td width="8%" align="center" bgcolor="#d3d3d3" class="xdtitle">基本或<br />漫游费</td>
         <td width="8%" align="center" bgcolor="#d3d3d3" class="xdtitle">长途费</td>
         <td width="8%" align="center" bgcolor="#d3d3d3" class="xdtitle">其他费</td>

         <td width="8%" align="center" bgcolor="#d3d3d3" class="xdtitle">优惠<br />减免</td>
         <td width="8%" align="center" bgcolor="#d3d3d3" class="xdtitle">小计</td>
       </tr>
     </table>
   </div>
   <div id="col_data">

-----------------------------------------------------------------------------

.headDiv 这个就是你要用来随着滚动条一起滚动的div，<div id="shiyan"></div>是用来单参照物的，在js中完成相对位置的计算。

head.style.position="absolute";
document.getElementById("col_head").style.top

这样 你的表头 就可以随着滚动条的下来 自动的跟随了， 效果很不错！

特此记录20090419 1555
zeng.cz