整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，今天我們將一起實(shí)踐下如何手寫固定表頭，那么什么是固定表頭呢？就類似 Excel 表格有個(gè)鎖定表頭的功能，方便用戶查閱數(shù)據(jù)進(jìn)行數(shù)據(jù)項(xiàng)的對(duì)比。雖然有不少相關(guān)插件提供了類似的功能，比如 ScrollMagic.js，但是今天的實(shí)例，我們將用純?cè)姆绞竭M(jìn)行實(shí)現(xiàn)，當(dāng)滾動(dòng)條滾動(dòng)至表格位置，固定表頭位置，表格內(nèi)容查看完后，取消固定表頭的功能。
功能對(duì)比是一個(gè)很常用的功能，尤其是當(dāng)網(wǎng)站服務(wù)越來越多時(shí)，就需要一個(gè)類似的功能，讓用戶能夠直觀的感受到各種服務(wù)的差異，幫助用戶選擇適合自己的方案。今天我們將通過一個(gè)界面十分漂亮功能價(jià)格對(duì)比的表格，展示固定表頭的功能，實(shí)例操作展示如視頻所示，當(dāng)滾動(dòng)條滾動(dòng)至表格位置，添加表頭固定樣式，當(dāng)滾動(dòng)至表格底部，移除固定表頭樣式：
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
這篇案例我們是通過JS代碼，判斷滾動(dòng)條的位置，動(dòng)態(tài)添加和移除表頭的固定樣式（fix屬性），這里就需要運(yùn)用幾個(gè)和位置相關(guān) DOM API 才能順利完成本案例，相關(guān) API 介紹如下所示：
1、Window pageXOffset 和 pageYOffset 屬性
pageXOffset 和 pageYOffset 屬性返回文檔在窗口左上角水平和垂直方向滾動(dòng)的像素。
pageXOffset 設(shè)置或返回當(dāng)前頁面相對(duì)于窗口顯示區(qū)左上角的 X 位置。pageYOffset 設(shè)置或返回當(dāng)前頁面相對(duì)于窗口顯示區(qū)左上角的 Y 位置。
pageXOffset 和 pageYOffset 屬性相等于 scrollX 和 scrollY 屬性。
2、clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
clientHeight：包括 padding 但不包括border、水平滾動(dòng)條、margin的元素的高度。對(duì)于inline的元素這個(gè)屬性一直是0，單位px，只讀元素。
offsetHeight：包括padding、border、水平滾動(dòng)條，但不包括margin的元素的高度。對(duì)于inline的元素這個(gè)屬性一直是0，單位px，只讀元素。
scrollHeight: 因?yàn)樽釉乇雀冈馗?，父元素不想被子元素?fù)蔚囊粯痈呔惋@示出了滾動(dòng)條，在滾動(dòng)的過程中本元素有部分被隱藏了，scrollHeight代表包括當(dāng)前不可見部分的元素的高度。而可見部分的高度其實(shí)就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滾動(dòng)條時(shí)討論scrollHeight才有意義，在沒有滾動(dòng)條時(shí)scrollHeight==clientHeight恒成立。單位px，只讀元素。
scrollTop: 代表在有滾動(dòng)條時(shí)，滾動(dòng)條向下滾動(dòng)的距離也就是元素頂部被遮住部分的高度。在沒有滾動(dòng)條時(shí)scrollTop==0恒成立。單位px，可讀可設(shè)置。
offsetTop:當(dāng)前元素頂部距離最近父元素頂部的距離,和有沒有滾動(dòng)條沒有關(guān)系。單位px，只讀元素。
本部分內(nèi)容摘自
https://imweb.io/topic/57c5409e808fd2fb204eef52
作者：IMWeb
吳浩麟
3、getBoundingClientRect
getBoundingClientRect 用于獲得頁面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗的位置。getBoundingClientRect是DOM元素到瀏覽器可視范圍的距離（不包含文檔卷起的部分）。
3.1、該函數(shù)返回一個(gè)Object對(duì)象，該對(duì)象有6個(gè)屬性：top,lef,right,bottom,width,height；
3.2、這里的top、left和css中的理解很相似，width、height是元素自身的寬高;
3.3、但是right，bottom和css中的理解有點(diǎn)不一樣。right是指元素右邊界距窗口最左邊的距離，bottom是指元素下邊界距窗口最上面的距離。
本部分內(nèi)容摘自：
https://juejin.im/entry/59c1fd23f265da06594316a9
作者：左鵬飛
1、創(chuàng)建三個(gè)基礎(chǔ)的 sections 的區(qū)域
<section>...</section>
<section>...</section>
<section>...</section>
第一部分為頁面標(biāo)題內(nèi)容，第三部分為內(nèi)容介紹區(qū)域，這兩部分非核心內(nèi)容，只是用于內(nèi)容占位，方便第二部分表格區(qū)域的展示，滾動(dòng)此區(qū)域表頭固定。
2、表格內(nèi)容結(jié)構(gòu)
我們將第二部分的表格放置在 container 的容器內(nèi)，方便我們做響應(yīng)式相關(guān)的設(shè)置，表格基礎(chǔ)結(jié)構(gòu)的內(nèi)容如下：
<div class="container">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- more rows here -->
</tbody>
</table>
</div>
</div>
該表格包含4列，代表產(chǎn)品服務(wù)的對(duì)比項(xiàng)目和服務(wù)的級(jí)別，服務(wù)級(jí)別包含：入門級(jí)，基礎(chǔ)級(jí)和專業(yè)級(jí)。
3、表頭內(nèi)容結(jié)構(gòu)
表頭部分應(yīng)該很清楚的展示服務(wù)項(xiàng)目的介紹，讓用戶有購買服務(wù)計(jì)劃的沖動(dòng)，界面展示如下所示：
相關(guān)的 HTML 結(jié)構(gòu)如下所示：
<tr>
<th>
<div>
Select your plan
<div class="svg-wrapper">
<svg viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 17v-4h-8v-2h8v-4l6 5-6 5z"/></svg>
</div>
</div>
</th>
<th>
<div class="heading">...</div>
<div class="info">
<div class="amount">...</div>
<div class="billing-msg">...</div>
<button type="button">...</button>
</div>
</th>
<th>
<div class="heading">...</div>
<div class="info">
<div class="popular">...</div>
<div class="amount">...</div>
<div class="billing-msg">...</div>
<button type="button">...</button>
</div>
</th>
<th>
<div class="heading">...</div>
<div class="info">
<div class="amount">...</div>
<div class="billing-msg">...</div>
<button type="button">...</button>
</div>
</th>
</tr>
4、表格相關(guān)的行
每行內(nèi)容描述服務(wù)內(nèi)容中相關(guān)的功能是否能用，這里用 SVG圖標(biāo)（對(duì)號(hào)，叉號(hào)）進(jìn)行直觀展示，界面展示如下圖所示：
相關(guān)的 HTML 結(jié)構(gòu)如下所示：
<tr>
<td>...</td>
<td>
<svg class="starter" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="essential" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="professional" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
</tr>
1、定義基礎(chǔ)樣式
HTML結(jié)構(gòu)準(zhǔn)備好后，接下來我們定義相關(guān)基礎(chǔ)的 CSS 樣式，比如定義 CSS 自定義變量和常見的重置樣式，示例代碼如下：
:root {
--white: white;
--gray: #999;
--lightgray: whitesmoke;
--popular: #ffdd40;
--starter: #f73859;
--essential: #00AEEF;
--professional: #FF7F45;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
button {
background: none;
border: none;
cursor: pointer;
}
table {
border-collapse: collapse;
}
body {
font: 18px/1.5 'Noto Sans', sans-serif;
background: var(--lightgray);
}
由于文章篇幅有限，這里不會(huì)將所有的 CSS 代碼進(jìn)行羅列，這里只介紹最核心的樣式內(nèi)容。
2、定義表格樣式
首先定義表格最大寬度，然后讓其水平居中：
.container {
max-width: 850px;
padding: 0 10px;
margin: 0 auto;
}
table {
width: 100%;
}
接下來讓行的容器為 flex 彈性盒子布局
table tr {
display: flex;
}
然后讓每列保持相同寬度，示例代碼如下：
table th,
table td {
width: 25%;
min-width: 150px;
}
最后為了讓單元格區(qū)域便于識(shí)別，我們用灰色邊框進(jìn)行區(qū)分，示例代碼如下：
--lightgray: whitesmoke;
table th .info,
table td:not(:first-child) {
border-left: 1px solid var(--lightgray);
}
HTML結(jié)構(gòu)和CSS完成后，接下來我們編寫腳本固定表頭。
1、定義DOM變量
首先我們先定義一些關(guān)鍵DOM元素的變量，比如獲取表格、表頭等元素，示例代碼如下：
const body=document.body;
const firstSection=document.querySelector("section:nth-child(1)");
const lastSection=document.querySelector("section:nth-child(3)");
const table=document.querySelector("table");
const thead=document.querySelector("table thead");
const mq=window.matchMedia("(min-width: 780px)");
const stickyClass="sticky-table";
const sticky2Class="sticky2-table";
2、獲取一些元素相關(guān)的值
基于這些我們定義相關(guān)的變量，獲取相關(guān)的值：
let tableWidth=table.offsetWidth;
let tableOffsetTop=table.getBoundingClientRect().top;
let theadHeight=thead.offsetHeight;
你可能注意到了這里我們使用 let 定義變量，之所以用 let ，我們改變窗口的大小，這些相關(guān)的值也會(huì)發(fā)生變化，需要進(jìn)行動(dòng)態(tài)更新。
3、編寫滾動(dòng)的相關(guān)邏輯
每次我們滾動(dòng)時(shí)，就會(huì)執(zhí)行我們定義的 scrollHandler 函數(shù)，我們這個(gè)函數(shù)只會(huì)在窗口寬度大于 780px 才會(huì)執(zhí)行固定表頭的邏輯，小屏設(shè)備則沒有相關(guān)效果。
基于以上邏輯我們實(shí)現(xiàn)相關(guān)的代碼邏輯：
window.addEventListener("scroll", scrollHandler);
function scrollHandler() {
if (mq.matches) {
// 1
const scrollY=window.pageYOffset;
// 2
const lastSectionOffsetTop=lastSection.getBoundingClientRect().top;
// 3
if (scrollY >=tableOffsetTop) {
// 4
thead.style.width=`${tableWidth}px`;
// 5
if (lastSectionOffsetTop > theadHeight) {
// 6
body.classList.remove(sticky2Class);
body.classList.add(stickyClass);
thead.style.top=0;
body.style.paddingTop=`${theadHeight}px`;
} else {
// 7
body.classList.remove(stickyClass);
body.classList.add(sticky2Class);
thead.style.top=`calc(100% - ${theadHeight}px)`;
}
} else {
// 8
body.classList.remove(stickyClass, sticky2Class);
body.style.paddingTop=0;
thead.style.width="100%";
thead.style.top="auto";
}
}
}
編寫相關(guān)的樣式代碼，stickyClass 和 sticky2-table 控制表頭的固定和取消表頭的固定
table thead {
transition: box-shadow 0.2s;
}
.sticky-table table thead {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
.sticky-table table thead {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
}
.sticky2-table table thead {
position: absolute;
left: 0;
}
由于窗口大小并非固定，我們會(huì)經(jīng)常會(huì)拖動(dòng)或調(diào)整窗口的大小，因此相關(guān)元素的寬度和視口高度都要重新計(jì)算，這里我們需要添加 resize 事件進(jìn)行監(jiān)聽，示例代碼如下：
window.addEventListener("resize", resizeHandler);
function resizeHandler() {
if (mq.matches) {
tableWidth=firstSection.offsetHeight;
tableOffsetTop=table.offsetTop;
theadHeight=thead.offsetHeight;
} else {
body.classList.remove(stickyClass, sticky2Class);
body.style.paddingTop=0;
thead.style.width="100%";
thead.style.top="auto";
}
}
最終的效果體驗(yàn)，大家可以點(diǎn)擊文末 了解更多 鏈接進(jìn)行體驗(yàn)（手機(jī)橫屏體驗(yàn)），由于文章篇幅有限，完整的源碼大家可以私信“表頭”獲取源碼鏈接。
到此，我們一起完成了這個(gè)案例，通過本案例，我們學(xué)會(huì)了如何使用原生的方式動(dòng)態(tài)實(shí)現(xiàn)固定元素，并在一定的時(shí)機(jī)取消固定。感謝你的閱讀，如果你喜歡我的分享，麻煩給個(gè)關(guān)注、點(diǎn)贊加轉(zhuǎn)發(fā)哦，你的支持，就是我分享的動(dòng)力，后續(xù)會(huì)持續(xù)分享更實(shí)用的案例，歡迎持續(xù)關(guān)注。
文章來源：
作者：George Martsoukos
網(wǎng)站：tutsplus
非直譯
動(dòng)手練一練，用 CSS Checkbox Hack 技術(shù)制作一個(gè)響應(yīng)式圖片幻燈
動(dòng)手練一練，做一個(gè)現(xiàn)代化、響應(yīng)式的后臺(tái)管理首頁
動(dòng)手練一練，使用 Flexbox 創(chuàng)建一個(gè)響應(yīng)式的表單
動(dòng)手練一練，用純 CSS 制作一款側(cè)滑顯示留言面板的網(wǎng)頁組件
使用 Vanilla JavaScript 框架創(chuàng)建一個(gè)簡單的天氣應(yīng)用
使用 CSS Checkbox Hack 技術(shù)制作一個(gè)手風(fēng)琴組件
lt;thead>標(biāo)簽定義HTML中<table>元素的標(biāo)題；
<thead>標(biāo)簽與<tbody>和<tfoot>標(biāo)簽一起使用，它們定義HTML表格中的表頭，表主體和表腳。
<thead>標(biāo)簽作為<table>標(biāo)簽的子元素，需出現(xiàn)在<caption>、<colgroup>元素之后；<tbody>，<tr>或<tfoot>元素之前。
<thead>標(biāo)記內(nèi)應(yīng)至少包含一行<tr>元素。
提示：<thead>、<tbody>和<tfoot>元素默認(rèn)不會(huì)影響表格的布局。不過可以使用CSS來為這些元素定義樣式，從而改變表格的外觀。
<thead>
<tr>……</tr>
<thead>
<table border="1">
<caption>圖書大廈書目價(jià)格單</caption>
<thead>
<tr>
<th>書名</th>
<th>單價(jià)</th>
</tr>
</thead>
<tr>
<td>HTML入門教程</td>
<td>79.00元</td>
</tr>
<tr>
<td>JavaScript基礎(chǔ)教程</td>
<td>46.00元</td>
</tr>
<tr>
<td>Python精品教程</td>
<td>99.00元</td>
</tr>
</table> 123456789101112131415161718192021復(fù)制代碼類型：[html]圖書大廈書目價(jià)格單 | |
書名 | 單價(jià) |
HTML入門教程 | 79.00元 |
JavaScript基礎(chǔ)教程 | 46.00元 |
Python精品教程 | 99.00元 |
在HTML5中，不再支持HTML4.01中<thead>標(biāo)簽的任何屬性。
所有主流瀏覽器都支持<thead>標(biāo)簽。
屬性 | 值 | 描述 |
align | right | HTML5 不支持。定義 <thead> 元素中內(nèi)容的對(duì)齊方式。 |
char | character | HTML5 不支持。規(guī)定 <thead> 元素中內(nèi)容根據(jù)哪個(gè)字符來對(duì)進(jìn)行文本對(duì)齊。 |
charoff | number | HTML5 不支持。規(guī)定 <thead> 元素中內(nèi)容的第一個(gè)對(duì)齊字符的偏移量。 |
valign | top | HTML5 不支持。規(guī)定 <thead> 元素中內(nèi)容的垂直對(duì)齊方式。 |
<thead>標(biāo)簽支持HTML的全局屬性。
<thead>標(biāo)簽支持HTML的事件屬性。
開課吧廣場(chǎng)-人才學(xué)習(xí)交流平臺(tái)
emo代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>el-table動(dòng)態(tài)表頭</title>
<link rel="stylesheet" type="text/css" href="./lib/element-ui/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<el-table
:data="tableBody"
:header-cell-style="{ background: '#F3F4F7' }"
:header-row-style="{ fontWeight: 500, color: '#909399' }"
>
<el-table-column align="center" :label="tableHeadItem" v-for="(tableHeadItem, idx) in tableHead" :key="idx">
<template scope="scope">
<i class="el-icon-platform-eleme" style="font-size: 16px"></i>
{{tableBody[scope.$index][idx]}}
</template>
</el-table-column>
</el-table>
</div>
<script src="./lib/vue/vue.js"></script>
<script src="./lib/element-ui/index.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
res: [
{
NAME: "王二",
VALUE: 1,
SEX: 2,
},
{
NAME: "張三",
VALUE: 1,
SEX: 1,
},
{
NAME: "李四",
VALUE: 2,
SEX: 1,
},
],
tableBody: [],
tableHead: [],
};
},
created() {
this.tableHead=Object.keys(this.res[0]); // 表頭 [ "NAME", "VALUE", "SEX" ]
this.res.forEach((item)=> {
this.tableBody.push(Object.values(item)); // 表體 [ ["王二", 1, 2], ["張三", 1, 1], ["李四"， 2, 1] ]
});
},
});
</script>
</body>
</html>動(dòng)態(tài)表格是生成列，也就是每一個(gè)<el-table-column>然后再根據(jù)所有列去遍歷生成行，這樣一個(gè)過程，知道這些，要做的就是根據(jù)這么一個(gè)過程去生成這樣一個(gè)數(shù)據(jù)格式就行了。
實(shí)現(xiàn)動(dòng)態(tài)表格的延伸：
element-ui官方推薦的CDN引入使用element的任務(wù)組件都是沒有問題的，但是如果將樣式和組件庫代碼下載下來改為本地引入，icon組件將不能使用！
CDN引入：
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>請(qǐng)求資源：
請(qǐng)求的網(wǎng)絡(luò)資源中多了一個(gè)element-icons.woff文件，原因：查看element中index.css中的icon的引入方式。
@font-face {
font-family: element-icons;
src: url(fonts/element-icons.woff) format("woff"), url(fonts/element-icons.ttf) format("truetype");
font-weight: 400;
font-display: "auto";
font-style: normal;
}解決方法：
復(fù)制字體圖標(biāo)資源鏈接下載下來，然后在element的index.css文件夾同級(jí)目錄中新建fonts文件夾放入下載好的element-icons.woff和element-icons.ttf字體圖標(biāo)文件。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
