表格標題隨頁面滾動固定在頂端的實現方式
阿新 • • 發佈:2019-01-05
最近接到一個需求,要求做表格標題隨頁面滾動,表格表頭固定在頁面頂端,這個任務以前也完成過,但這次實現出現了一些問題,在此記錄下來。
首先重現一下基本的思路,在表格和表頭都已經是設計好的並且固定的情況下,重新在div裡新建一個表格的表頭,格式和樣式要和顯示出來的表頭一樣,然後設定樣式
#table
{
display: none;
position: fixed;
top: 0px;
}
使其固定在頁面上邊緣,並且隱藏。
然後就是寫js,思路為監聽頁面的滑動事件,如果頁面滑動的距離
$(document).ready(function() {
// 先取得兩個元素
var $tgridView = $("#gridView");//目標表格
var $tScroll = $("#tScroll");//固定的表頭,現在是隱藏狀態
var top = $tgridView.offset().top // 標題距離頁面頂部的位置
//在第一次載入時,offset.top取得的值是當前元素到頁面頂端的高度,而不是預想中的到當前iframe的高度,故做此處理,可以隨專案情況改動
if (top == 303) {
top = 90;
};
//監聽滑動事件
$(document).scroll(function() {
var data = $tScroll.data("scroll");給表格元素附上一個值,作為判斷是否是隱藏的狀態
data = data || false;//無論當前頁面是什麼狀態,預設的值都為false,即是隱藏狀態,將要顯示
// 當滾動到表頭被遮蓋時
if ($(this).scrollTop() >= top) {
// data為false,則顯示固定的表頭,反之則不顯示
if (!data) {
$tScroll.show().data("scroll", true) ;//顯示後,將狀態改變,下同
}
} else {
if (data) {
$tScroll.data("scroll", false).hide();
}
}
});
});
具體思路就是這樣,此時要注意幾個問題,第一是scrollTop屬性有可能一直返回0,導致程式出錯,在Stack Overflow上查到的解決方法:
文中提到的幾個方法,去掉height:100%,給頁面設定固定高度,和用window.scrollY屬性可以解決,第二個問題在程式碼裡也有標註,即不同狀態載入頁面時,頁面元素到頁面定的距離和預期的不同,當前頁面是在easyui的選項卡中的,在頁面第一次載入和在頁面操作刷星之後距離會有變化,目前沒有找到太好的解決方案,好在這種變化較為固定,所以暫時用一個條件語句搞定。