頁面滾動table頭部懸浮

頁面滾動頭部懸浮，一般都會首相想到監聽滾動條離頂部高度然後給需要懸浮的部分position設定成fixed，在一般布局裡面是可以的，不過在table布局裡面，如果要fixed懸浮thead裡面的th會發現寬度樣式都亂了。只能想其他辦法了，可以先寫乙個div裡面放正常需要的table，然後滾動頁面後再顯示出乙個可以隨螢幕滾動的新的thead，如圖所示，圈起來的代表需要懸浮的thead：

滾動懸浮的效果如圖：

話不多說直接上**。

css**如下：

html**如下：

商品資訊單價數量訂單總價狀態商品資訊單價數量訂單總價狀態

js**如下：

$(window).scroll(function () );
}else 
}});

以上**就可以完成頁面滾動到table的thead下面後，thead懸浮在頁面，不過會發現懸浮的thead每一列的寬度和原來的對應不上，需要在原來table內容生成後加上另外一段js，我的table內容是非同步得到的，所以放在ajax的success裡面呼叫，寬度設定js如下：

//該函式在上面乙個table資料載入完成後呼叫
//把表頭的寬度設定到會滾動的頁頭去
function copythwidth()
}

這樣就大功告成了~

頁面滾動table頭部懸浮

table列表滾動

JS CSS 實現懸浮滾動廣告

table固定表頭滾動

頁面滾動table頭部懸浮

table列表滾動

JS CSS 實現 懸浮滾動廣告

table固定表頭滾動

相關推薦

JS CSS 實現懸浮滾動廣告