[網(wǎng)站開發(fā)入門指南21] 表單元素們中的input標(biāo)簽｜ html

站開發(fā)入門指南：表單相關(guān)標(biāo)簽們。

接下來我們來學(xué)習(xí)一下表單以及相關(guān)的元素。

·表單其實(shí)英文是叫做fo.rm，在我們平時使用的這種互聯(lián)網(wǎng)產(chǎn)品中包括網(wǎng)站也好、app也好，經(jīng)常會看到這種需要你去填一些資料、填一些文字、填一些數(shù)據(jù)的這樣一種頁面。像這種頁面其實(shí)都是通過表單以及表單的元素去構(gòu)成、去實(shí)現(xiàn)的。

也就是說表單其實(shí)是用來收集用戶數(shù)據(jù)的，它是給用戶去輸入一些數(shù)據(jù)的。而且輸入完之后，一般它是要跟服務(wù)器去發(fā)生一些交互的。就是比如說把數(shù)據(jù)發(fā)送到服務(wù)器或者在本地處理過后，再給到服務(wù)器去進(jìn)一步的處理或者去保存。所以其實(shí)表單這些元素，如果真正要去用起來的話，真正要讓它功能跑起來的話，其實(shí)很多時候是要跟js打交道的。所以目前來說只要簡單的去了解一下表單的元素的基本使用就可以了。

·然后后面學(xué)了CSS之后，你也知道怎么去給這些表單做它的樣式就OK了。那我們看一下表單以及相關(guān)的元素有哪些？表單主要是有一個這樣一個表單本身的標(biāo)簽，另外這些就是跟它相關(guān)的一些標(biāo)簽元素了。這些元素一般都是放在這個for.m元素里面的嵌套在它里面的。

但是表單的元素，它跟我們之前學(xué)過的ul li-olli一定要進(jìn)行嵌套使用的，這種元素還不太一樣。表單中的元素，像這個和這個是經(jīng)常可以單獨(dú)使用的，也就是說不用嵌套在這個form表單里面也是可以用的。所以要明白這些表單內(nèi)的元素，如果你有需要是完全可以去獨(dú)立的去使用它的，并不一定要跟這個for.m.搭.配起來嵌套在它里面的。

·很多時候去使用form這樣的標(biāo)簽。然后把這些表單的元素嵌套在里面。它其實(shí)主要的一個目的，它是為了讓這些就是收集到的數(shù)據(jù)組成一種結(jié)構(gòu)化的一種模式，結(jié)構(gòu)化的一種狀態(tài)。這樣發(fā)送到服務(wù)器，服務(wù)器也可以通過這種更好的結(jié)構(gòu)去讀取數(shù)據(jù)。

所以目前的學(xué)習(xí)階段來講是沒有辦法給你去展示表單的作用。但是等你學(xué)到JS之后，你在有了這些基礎(chǔ)知識之后，就能通過JS其實(shí)非常清晰看到它的整個數(shù)據(jù)結(jié)構(gòu)。這節(jié)課主要是來講一講這個標(biāo)簽，這個標(biāo)簽其實(shí)會經(jīng)常單獨(dú)的來進(jìn)行使用。這個標(biāo)簽之前也簡單的給大家去演示過，它是一個用來做這種文字輸入的標(biāo)簽。

很多時候，像這種真實(shí)的產(chǎn)品頁面，產(chǎn)品里面會發(fā)現(xiàn)很多的輸入欄都是用這個標(biāo)簽去實(shí)現(xiàn)。打開開發(fā)者工具之后，可以看到這里有一個這樣的小工具，選用它之后就可以去快速的定位到元素。可以看到它這邊有個input，選中之后，元素列表這里也能看到就是input這樣的元素。所以很多的頁面上的輸入框其實(shí)都是用input元素來實(shí)現(xiàn)的。

input非常重要的屬性叫做type，type屬性之前演示過一個叫text(的值)，一個叫Checkbox，給大家演示過。這兩個設(shè)置之后是會產(chǎn)生不同的效果。這種能設(shè)置的屬性的值非常多，我這里不給大家去做演示，你有興趣自己可以去嘗試去使用一下。

這里主要是介紹一個是這個之前講過的，給大家簡單也再看一下。一個是checkbox，一個是checkbox，還有一個file，其他的。

還有pasisword也給大家看一下。這里來看一下。首先看到input非常簡單，直接默認(rèn)的text它這邊，這邊先把它放大一點(diǎn)，放五倍大，大家看起來清楚一點(diǎn)。這樣就可以在這里輸入這樣一個內(nèi)容了，非常簡單。

然后比如這里改成password，然后這邊輸入的東西自動的就變成這種小圓點(diǎn)了，就相當(dāng)于是一種幫你保密，就是防止別人偷看到你的密碼。然后就是checkbox(多選框)。之前簡簡單演示過了checkbox會變成這種勾選的框，它有一個屬性，如果你使用的checkbooks這樣的類型，你可以使用這個checked這樣的屬性，就讓元素默認(rèn)是打勾(選中)的狀態(tài)。

像這種東西其他的前面一般都會有一個文字，告訴你這個選項是什么，然后這里把這個改一下，就叫做選擇。想學(xué)習(xí)的語言其實(shí)一定是可以多選的。這里來一個寫一個span，叫做js好html，然后自己再多復(fù)制幾個，然后這里變成CSS，變成javascript。像這種前面這種文字用span都是沒有任何問題的。

但是其實(shí)在表單元素里面有一個標(biāo)簽叫做lab.el。label其實(shí)一般用來寫這種，就是告訴這個選項是什么樣的一個選項，這樣的一些文字。label有個特殊的作用，比如說把這個換成label，label之后這里有一個屬性叫做for，for可以去跟比如說input，這里設(shè)計一個id叫做html。

稍微跟寫的不一樣，這個其實(shí)寫一樣也沒有關(guān)系，但是這里寫不一樣，大家可能更容易理解一點(diǎn)。

把名字id名跟這個對應(yīng)上之后for里面是某個元素的id值，就是input這樣的一個元素的id值，label就跟input元素綁定了。注意這里寫錯了label。

·然后看一下可以點(diǎn)擊文字，就相當(dāng)于點(diǎn)擊了選項框，其他的用spam包裹的文字是沒有綁定的效果。所以label標(biāo)簽的作用就是有這樣的一個文字跟相應(yīng)的元素綁定起來。點(diǎn)擊文字相當(dāng)于就點(diǎn)擊元素這樣的效果。

·然后可以看一下另外一種叫radio這種單選框的元素，也是用input來實(shí)現(xiàn)的。然后來看一下input，把它設(shè)置成radio的類型就會變成這樣一個圓點(diǎn)。假如還是按照這種模式，比如說這里把ID也設(shè)置一下叫做htmltag，其實(shí)跟htmltag類型的數(shù)據(jù)庫也是一樣的。如果設(shè)置checked就默認(rèn)的，就相當(dāng)于是選中的狀態(tài)。

·如果這里還有單選，這里還有一個，如果叫CSS，把這個先取消掉。這里其實(shí)是有兩個選項，兩個可選項，整個的結(jié)果是希望是呈現(xiàn)單選的狀態(tài)，選中其中另外一個，肯定要呈現(xiàn)一種未選中的狀態(tài)。

·現(xiàn)在兩個都可以同時選中，這樣肯定是不行的。所以這里可以用屬性，叫做name，就叫section。下面同時也取名字，也是name同樣的值。

這里可以把它理解成用了同一個名字的單選框，他們最終只能選中其中一個。可以試一下，比如說點(diǎn)CSS，點(diǎn)html，這個東西是單選框里面非常重要的知識點(diǎn)。

txt文件變成html網(wǎng)頁文件

如果您看過《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作》這篇教程，請按照其中說明創(chuàng)建一個txt文件。具體過程如下：

step1：在您方便的磁盤中建立一個文件夾，命名為"零基礎(chǔ)自學(xué)網(wǎng)頁制作"。例如我在D盤中建立了"零基礎(chǔ)自學(xué)網(wǎng)頁制作"文件夾。

step2：在文件夾中創(chuàng)建"HTML框架.txt"文件。鼠標(biāo)移動到空白處點(diǎn)擊右鍵選擇"文本文檔"。

命名為"html框架"，如下圖所示。

如果您的電腦沒有顯示".txt"后綴的話，請做如下操作：點(diǎn)擊"工具"，找到"文件夾選項"

菜單如下：點(diǎn)擊"查看選項"。

下拉滑條，找到"隱藏已知文件類型的擴(kuò)展名"選項，將前面的對勾去掉。

如果您使用的是win10的話請參考《邊學(xué)邊做網(wǎng)頁篇------初識HTML》，這也是我做的教程，不過以后都使用這個賬號來發(fā)了。

step3：把"HTML框架"復(fù)制粘貼到"html框架.txt"文件中。HTML框架代碼如下：

<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>

代碼講解請參照《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作》這篇教程中的講解。

粘貼后效果如下：使用CTRL+s組合鍵保存文件。

step4：復(fù)制"html框架.txt"文件，更名為"第一個網(wǎng)頁.txt"。原始的"html框架.txt"文件為以后備用。

如圖所示：

step5：把"第一個網(wǎng)頁.txt"的后綴名".txt"改為".html"。

首先將光標(biāo)放在"第一個網(wǎng)頁.txt"文件上，點(diǎn)擊右鍵，選擇"重命名"。如圖：

選擇".txt"

更改為".html",敲擊回車鍵。這時會彈出一個對話框，如圖:

大膽的點(diǎn)擊"是"即可。

修改后文件是這樣的，如圖：因?yàn)槲业哪J(rèn)瀏覽器是360，所以，".html"文件圖標(biāo)顯示為360瀏覽器的圖標(biāo)，顯示其他瀏覽器的圖標(biāo)也沒有問題。

step6：將鼠標(biāo)移動到"第一個網(wǎng)頁.html"文件上，單擊右鍵，選擇打開方式，如圖：

選擇任何一個瀏覽器打開即可，我使用的是火狐瀏覽器（Firefox），打開后如圖所示：空白一片。

點(diǎn)擊鍵盤F12鍵，看一下控制臺，如圖：查看器中已經(jīng)顯示我們的代碼框架了。成功！

如果網(wǎng)頁是一道菜，那么，html框架我們可以理解為裝菜的白盤子，所以我們打開框架時，瀏覽器顯示一片白。下面我們?yōu)楸P子中加些簡單的"菜"。

為html頁面添加標(biāo)題與段落

首先我們?yōu)轫撁嫣砑?#34;標(biāo)題"

在添加標(biāo)題前，我們來看一下html框架代碼中的內(nèi)容，在<html></html>標(biāo)簽中有<head></head>和<body></body>兩個兄弟標(biāo)簽。

我們在頁面中看到的所有的內(nèi)容都是添加到<body></body>標(biāo)簽中間！

<head></head>標(biāo)簽中的內(nèi)容并不會顯示在頁面中。

那么如何添加"標(biāo)題"呢？

標(biāo)題在HTML中用<h></h>標(biāo)簽表示。在<h></h>中間加入文字內(nèi)容即可。如下所示：

<h>第一個頁面</h>

右鍵，使用"記事本"打開"第一個網(wǎng)頁.html"文件。如圖所示：如果您的"打開方式"中沒有"記事本"請點(diǎn)擊"選擇默認(rèn)程序"

在"其他程序"中找到"記事本"。點(diǎn)擊"確定"。從此，"記事本"就一直存在于"打開方式"中了。

我們把這句代碼粘貼到<body></body>之間。如下所示：保存后使用瀏覽器打開。

<!DOCTYPE HTML><html><head> </head> <body> <h>第一個頁面</h> </body> </html>

然后，使用瀏覽器打開，如圖所示：標(biāo)題出現(xiàn)在頁面中了。

下面，我們來添加段落內(nèi)容。

段落在HTML中使用<p></p>標(biāo)簽添加。代碼如下

<p>千里之行始于足下</p>

請各位自行將代碼添加到"第一個網(wǎng)頁.html"文件中吧！示例代碼如下：

<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個網(wǎng)頁</h><p>千里之行始于足下</p> </body> </html>

結(jié)果如圖所示：

通過這個練習(xí)，我們可以發(fā)現(xiàn)一個規(guī)律，在<body></body>中，子元素代碼的上下順序代表了它在頁面中顯示的排版順序。

這也簡單回答了代碼結(jié)構(gòu)與排版的關(guān)系，html的標(biāo)簽語句只是標(biāo)記了它所承載的信息的屬性和版面位置。

基于這個特性，html被稱為超文本標(biāo)記語言。

下一期我們具體討論頁面中文字編輯的技巧。

喜歡的小伙伴請加關(guān)注，有任何問題請給我留言，歡迎大家給與指正！感激不盡！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

家好，今天我們將一起實(shí)踐下如何手寫固定表頭，那么什么是固定表頭呢？就類似 Excel 表格有個鎖定表頭的功能，方便用戶查閱數(shù)據(jù)進(jìn)行數(shù)據(jù)項的對比。雖然有不少相關(guān)插件提供了類似的功能，比如 ScrollMagic.js，但是今天的實(shí)例，我們將用純原生的方式進(jìn)行實(shí)現(xiàn)，當(dāng)滾動條滾動至表格位置，固定表頭位置，表格內(nèi)容查看完后，取消固定表頭的功能。

一、實(shí)踐一個功能價格對比的表格案例

功能對比是一個很常用的功能，尤其是當(dāng)網(wǎng)站服務(wù)越來越多時，就需要一個類似的功能，讓用戶能夠直觀的感受到各種服務(wù)的差異，幫助用戶選擇適合自己的方案。今天我們將通過一個界面十分漂亮功能價格對比的表格，展示固定表頭的功能，實(shí)例操作展示如視頻所示，當(dāng)滾動條滾動至表格位置，添加表頭固定樣式，當(dāng)滾動至表格底部，移除固定表頭樣式：

二、案例相關(guān)知識點(diǎn)復(fù)習(xí)

這篇案例我們是通過JS代碼，判斷滾動條的位置，動態(tài)添加和移除表頭的固定樣式（fix屬性），這里就需要運(yùn)用幾個和位置相關(guān) DOM API 才能順利完成本案例，相關(guān) API 介紹如下所示：

1、Window pageXOffset 和 pageYOffset 屬性

pageXOffset 和 pageYOffset 屬性返回文檔在窗口左上角水平和垂直方向滾動的像素。

pageXOffset 設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 X 位置。pageYOffset 設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 Y 位置。

pageXOffset 和 pageYOffset 屬性相等于 scrollX 和 scrollY 屬性。

2、clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

clientHeight：包括 padding 但不包括border、水平滾動條、margin的元素的高度。對于inline的元素這個屬性一直是0，單位px，只讀元素。

offsetHeight：包括padding、border、水平滾動條，但不包括margin的元素的高度。對于inline的元素這個屬性一直是0，單位px，只讀元素。

scrollHeight: 因?yàn)樽釉乇雀冈馗撸冈夭幌氡蛔釉負(fù)蔚囊粯痈呔惋@示出了滾動條，在滾動的過程中本元素有部分被隱藏了，scrollHeight代表包括當(dāng)前不可見部分的元素的高度。而可見部分的高度其實(shí)就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滾動條時討論scrollHeight才有意義，在沒有滾動條時scrollHeight==clientHeight恒成立。單位px，只讀元素。

scrollTop: 代表在有滾動條時，滾動條向下滾動的距離也就是元素頂部被遮住部分的高度。在沒有滾動條時scrollTop==0恒成立。單位px，可讀可設(shè)置。

offsetTop:當(dāng)前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關(guān)系。單位px，只讀元素。

本部分內(nèi)容摘自
https://imweb.io/topic/57c5409e808fd2fb204eef52
作者：IMWeb
吳浩麟

3、getBoundingClientRect

getBoundingClientRect 用于獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。getBoundingClientRect是DOM元素到瀏覽器可視范圍的距離（不包含文檔卷起的部分）。

3.1、該函數(shù)返回一個Object對象，該對象有6個屬性：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
作者：左鵬飛

三、創(chuàng)建 HTML 基礎(chǔ)結(jié)構(gòu)

1、創(chuàng)建三個基礎(chǔ)的 sections 的區(qū)域

<section>...</section>
<section>...</section>
<section>...</section>

第一部分為頁面標(biāo)題內(nèi)容，第三部分為內(nèi)容介紹區(qū)域，這兩部分非核心內(nèi)容，只是用于內(nèi)容占位，方便第二部分表格區(qū)域的展示，滾動此區(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ù)的對比項目和服務(wù)的級別，服務(wù)級別包含：入門級，基礎(chǔ)級和專業(yè)級。

3、表頭內(nèi)容結(jié)構(gòu)

表頭部分應(yīng)該很清楚的展示服務(wù)項目的介紹，讓用戶有購買服務(wù)計劃的沖動，界面展示如下所示：

相關(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)（對號，叉號）進(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);
}

由于文章篇幅有限，這里不會將所有的 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ū)域便于識別，我們用灰色邊框進(jìn)行區(qū)分，示例代碼如下：

--lightgray: whitesmoke;
 
table th .info,
table td:not(:first-child) {
  border-left: 1px solid var(--lightgray); 
}

五、編寫固定表頭的相關(guān)腳本

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)的值

獲取表格的 offsetWidth 寬度
獲取表格距離視口頂部的距離（getBoundingClientRect().top）
獲取表頭的 offsetHeight 高度

基于這些我們定義相關(guān)的變量，獲取相關(guān)的值：

let tableWidth = table.offsetWidth;
let tableOffsetTop = table.getBoundingClientRect().top;
let theadHeight = thead.offsetHeight;

你可能注意到了這里我們使用 let 定義變量，之所以用 let ，我們改變窗口的大小，這些相關(guān)的值也會發(fā)生變化，需要進(jìn)行動態(tài)更新。

3、編寫滾動的相關(guān)邏輯

每次我們滾動時，就會執(zhí)行我們定義的 scrollHandler 函數(shù)，我們這個函數(shù)只會在窗口寬度大于 780px 才會執(zhí)行固定表頭的邏輯，小屏設(shè)備則沒有相關(guān)效果。

獲取用戶從視口頂部滾動的距離（pageYOffset）
獲取最后一部分內(nèi)容區(qū)域距離窗口頂部的高度（getBoundingClientRect().top）
檢測滾動條是否滾動到表格區(qū)域。
如果滾動到表格區(qū)域，獲取重置后的表頭寬度。
接下來我們來判斷第三部分內(nèi)容區(qū)域距離視口頂部的高度是否大于表頭的高度。
如果還在滾動表格的內(nèi)容，我們將添加固定表頭的樣式stickyClass，移除取消固定的樣式sticky2-table。
如果滾動條滾動至第三部分內(nèi)容區(qū)域，我們將移除固定表頭的樣式stickyClass，添加移除固定表頭的樣式 sticky2-table。
如果屏幕寬度小于780px，取消固定表頭的邏輯，移除stickyClass，sticky2-table 相關(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;
}

六、編寫窗口大小發(fā)生變化的相關(guān)邏輯

由于窗口大小并非固定，我們會經(jīng)常會拖動或調(diào)整窗口的大小，因此相關(guān)元素的寬度和視口高度都要重新計算，這里我們需要添加 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)），由于文章篇幅有限，完整的源碼大家可以私信“表頭”獲取源碼鏈接。

小節(jié)

到此，我們一起完成了這個案例，通過本案例，我們學(xué)會了如何使用原生的方式動態(tài)實(shí)現(xiàn)固定元素，并在一定的時機(jī)取消固定。感謝你的閱讀，如果你喜歡我的分享，麻煩給個關(guān)注、點(diǎn)贊加轉(zhuǎn)發(fā)哦，你的支持，就是我分享的動力，后續(xù)會持續(xù)分享更實(shí)用的案例，歡迎持續(xù)關(guān)注。

文章來源：
作者：George Martsoukos
網(wǎng)站：tutsplus
非直譯

整合營銷服務(wù)商