這篇文章將為大家詳細(xì)講解有關(guān)怎么在 Vue中實(shí)現(xiàn)一個(gè)吸頂錨點(diǎn)組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)公司一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)頁(yè)設(shè)計(jì)、重慶小程序開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、App定制開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來(lái)見證！

拆分功能點(diǎn)

現(xiàn)在我們已經(jīng)明確需求了，接下來(lái)我們總結(jié)一下這個(gè)需求有哪些功能點(diǎn)：

• 按鈕組要有吸頂效果

• 點(diǎn)擊按鈕要有錨點(diǎn)定位功能

• 滾動(dòng)內(nèi)容區(qū)需要找到對(duì)應(yīng)的按鈕并高亮

吸頂組件

要做一個(gè)吸頂效果最簡(jiǎn)單的方式是將 css 的 position 屬性設(shè)置為 sticky， 這樣就實(shí)現(xiàn)粘性布局。

.sticky-container {
 position: sticky;
 top: 0px;
}

上面的示例僅僅用了兩行 css 的代碼就實(shí)現(xiàn)了粘性布局，但由于 IE 瀏覽器完全不支持粘性布局，而我的項(xiàng)目又需要支持一部分的 IE 瀏覽器，所以就需要手動(dòng)去實(shí)現(xiàn)這樣一個(gè)功能。

MDN 官方對(duì)粘性布局的解釋是這樣的，粘性布局元素默認(rèn)是相對(duì)定位的，當(dāng)粘性元素超出父元素的指定值（如 `top` 、`left` 等），例如上面的示例，當(dāng)元素粘性元素改為固定定位。關(guān)于父級(jí)元素 MDN 描述的不是很精確，這里的父級(jí)元素指的是父級(jí)滾動(dòng)元素，如果沒有父級(jí)滾動(dòng)元素則將 `body` 元素作為父級(jí)元素。

既然需要自己實(shí)現(xiàn)一個(gè)吸頂?shù)男Ч?，思考到其他?yè)面可能也會(huì)使用的吸頂?shù)墓δ?，所以決定將其單獨(dú)抽離成一個(gè)通用組件。首先我們知道粘性布局是對(duì)父級(jí)滾動(dòng)元素定位，所以我們要先找到父級(jí)滾動(dòng)元素，這個(gè)功能我們可以通過(guò)兩種方式實(shí)現(xiàn)，一種是向上查找，一種是通過(guò) props 傳遞一個(gè)唯一標(biāo)識(shí)的 css 選擇器。

我覺得其他項(xiàng)目可能也會(huì)遇到這個(gè)功能，所以我定義組件 盡量向著開源靠攏，所以我這里同時(shí)支持兩種方案。首先我們要實(shí)現(xiàn)一個(gè)查找父級(jí)滾動(dòng)元素的功能，如何判斷一個(gè)元素是滾動(dòng)元素呢？很簡(jiǎn)單判斷其 `overflow` 是否是 `auto` 或者 `scroll`。

// util.js 文件
// 判斷一個(gè)元素是否是滾動(dòng)元素
const scrollList = ['auto', 'scroll']

export function hasScrollElement(el, direction = 'vertical') {
 if (!el) return
 const style = window.getComputedStyle(el)
 if (direction === 'vertical') {
 return scrollList.includes(style.overflowY)
 } else if (direction === 'horizontal') {
 return scrollList.includes(style.overflowX)
 }
}

// 獲取第一個(gè)滾動(dòng)元素
export function getFirstScrollElement(el, direction = 'vertical') {
 if (!el) return
 if (hasScrollElement(el, direction)) {
 return el
 } else {
 return getFirstScrollElement(el && el.parentElement, direction)
 }
}

這里說(shuō)下實(shí)現(xiàn)吸頂效果所需要的一些基礎(chǔ)知識(shí)：

• fixed 定位是相對(duì)于瀏覽器的可視區(qū)進(jìn)行定位，這意味著即使頁(yè)面滾動(dòng)，它還是會(huì)固定在相同的位置

• offsetTop 是一個(gè)只讀的屬性，它返回當(dāng)前元素相對(duì)于距離它最近的父級(jí)定位元素頂部的距離。

• scrollTop 屬性可以獲取或設(shè)置一個(gè)元素的內(nèi)容垂直滾動(dòng)的像素值，`scrollTop` 表示這個(gè)元素達(dá)到父級(jí)滾動(dòng)元素頂部的距離。

.cpt-sticky {
 .top-fixed {
 position: fixed;
 width: 100%;
 background: #fff;
 }
}

就像上面的示例代碼一樣，短短幾十行就實(shí)現(xiàn)了一個(gè)吸頂組件，不過(guò)它實(shí)現(xiàn)了吸頂?shù)墓δ?，但是還有一些缺陷。

1. 在慢速滾動(dòng)頁(yè)面，吸頂組件在固定與非固定的時(shí)候有明顯的卡頓現(xiàn)象。

2. 由于我的需求有一些是需要做錨點(diǎn)定位功能，但是直接用錨點(diǎn)定位會(huì)改變路由所以改為了滾動(dòng)定位（后面會(huì)細(xì)說(shuō)）。但是由于吸頂組件在 `fixed` 之后會(huì)脫離文檔流，導(dǎo)致定位的元素會(huì)有一部分（吸頂組件高度 ）被卡在吸頂組件下方。就像下面這張圖的效果，右邊的錨點(diǎn)定位2區(qū)域的標(biāo)題被隱藏了。

這些問(wèn)題也很好解決，使用一個(gè)和吸頂組件相同大小的占位元素，當(dāng)吸頂組件脫離文檔流之后，占位元素插入吸頂組件原來(lái)的 DOM 位置中，然后順便帶上一些小優(yōu)化。由于占位元素需要和組件高度一致，所以必須要保證 `slot` 插槽中的 DOM 元素已經(jīng)被加載完成，另外放在 slot 元素中可能發(fā)生變更，所以我在吸頂狀態(tài)變更之前獲取其高度。

.cpt-sticky {
 .top-fixed {
 position: fixed;
 width: 100%;
 background: #fff;
 }
}

錨點(diǎn)定位

網(wǎng)頁(yè)中經(jīng)常會(huì)有用到錨點(diǎn)定位的場(chǎng)景，例如百度知道的目錄，我目前知道有三種方式可以實(shí)現(xiàn)這種功能。

1. 使用 a 標(biāo)簽定位

2. 使用 js 定位

使用 a 標(biāo)簽定位

先說(shuō)說(shuō) a 標(biāo)簽定位，這是一種最常用的定位方式。它有兩種實(shí)現(xiàn)方式，一種是通過(guò) herf 屬性鏈接的指定元素的 id。另一種是添加一個(gè) a 標(biāo)簽，再將 href 屬性鏈接到這個(gè) a 標(biāo)簽的 name 屬性。

按鈕1
按鈕1
...
視圖1