联通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