中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

【元素定位】

萬事俱備，只欠定位了。
由于要根據(jù)窗口滾動狀態(tài)來判斷計算定位，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就會定位到視框底部，這樣看上去會比較自然順暢。
如果不選擇自動的話就會根據(jù)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時視框高度會發(fā)生變化，所以resize事件要綁定SetPos程序。

出處：藍色理想
責任編輯：bluehearts

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

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。