【元素定位】

万事俱备，只欠定位了。
由于要根据窗口滚动状态来判断计算定位，scrollTop/scrollLeft的获取必不可少。
但在chrome中就算用了DOCTYPE，也要用document.body来获取scrollTop/scrollLeft，尽管它确实有document.documentElement。
对chrome了解不多，也不知哪里能查它的相关文档，程序里就直接做个判断算了：

this._doc = isChrome ? document.body : document.documentElement;

定位的第一步就是判断是否需要定位，这里的判断标准有两个，第一个是原tr是否超过了视窗范围，还有是新table要显示的位置是否在原table的显示范围内。
第一点可以通过原tr位置的顶部和底部是否超过视窗的顶部和底部来判断：

var top = this._doc.scrollTop, left = this._doc.scrollLeft
    ,outViewTop = this._oRowTop < top, outViewBottom = this._oRowBottom > top + this._viewHeight;
if(outViewTop || outViewBottom){}

在看第二点之前先看看程序中的Auto属性，它是用来指定否自动定位的。
如果自动定位的话当原tr离开视框顶部新table就会定位到视框顶部，原tr离开底部新table就会定位到视框底部，这样看上去会比较自然顺畅。
如果不选择自动的话就会根据SetPos方法中计算得到的新table视窗top值来设置定位：

var viewTop = !this.Auto ? this._nTableViewTop
    : (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//视窗top
    ,posTop = viewTop + top;//位置top

接着就判断新table要显示的位置是否在原table的显示范围内，这个可以通过新table位置的顶部和底部是否超过原table的顶部和底部来判断：

if(posTop > this._oTableTop && posTop + this._nTableHeight < this._oTableBottom){}

当符合所有的条件就可以进行定位了，如果是fixed定位的就使用相对视窗的top值：

this._style.top = viewTop + "px";
this._style.left = this._oTableLeft - left + "px";

像ie6是absolute定位的就要使用相对文档的top值：

this._style.top = posTop + "px";
this._style.left = this._oTableLeft + "px";

考虑到左右滚动的情况，left也必须设置。

当然不符合条件就会隐藏新table，程序中给top设置一个很大的负值来间接“隐藏”它。
用负值是因为这样不会把ie6的页面拉长，不用display是因为上面需要获取它的offsetHeight，如果用display隐藏就获取不了啦。

最后把Run程序绑定到window的scroll事件中就可以了，而window在resize时视框高度会发生变化，所以resize事件要绑定SetPos程序。

出处：蓝色理想
责任编辑：bluehearts

上一页 JavaScript Table行定位效果 [6] 下一页 JavaScript Table行定位效果 [8]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。