滾動列表導航欄吸頂功能的封裝

JavaScript · 發表 2018-11-22 14:44:48

摘要：因為遇到了這個需求，網上找了一圈也沒發現好用的外掛，於是就自己寫了一個，使用方式簡便，已經在專案的好幾處用到了這個外掛，現分享出來。滾動列表頭部吸頂效果安裝 Installation npm i sticky-list-headers --save 使...

因為遇到了這個需求，網上找了一圈也沒發現好用的外掛，於是就自己寫了一個，使用方式簡便，已經在專案的好幾處用到了這個外掛，現分享出來。

滾動列表頭部吸頂效果

安裝 Installation

npm i sticky-list-headers --save

使用 usage

引入 import

import StickyListHeaders from 'sticky-list-headers'

or

<script src="/node_modules/sticky-list-headers/dist/sticky-list-headers.min.js"></script>
複製程式碼

使用 use

<body>
<div id="outer-container">
<div id="inner-container">
<h1 id="header1">標題1</h1>
<p>列表文字</p>
<p>列表文字</p>
<p>列表文字</p>
<h1id="header2">標題2</h1>
<p>列表文字</p>
<p>列表文字</p>
<p>列表文字</p>
<h1id="header3">標題3</h1>
<p>列表文字</p>
<p>列表文字</p>
<p>列表文字</p>
<h1id="header4">標題4</h1>
<p>列表文字</p>
<p>列表文字</p>
<p>列表文字</p>
<h1id="header5">標題5</h1>
<p>列表文字</p>
<p>列表文字</p>
<p>列表文字</p>
<h1id="header6">標題6</h1>
<p>列表文字</p>
<p>列表文字</p>
</div>
</div>
<script>
new StickyListHeaders({
outerContainer: 'outer-container',
innerContainer: 'inner-container',
headers: ['header1', 'header2', 'header3', 'header4', 'header5', 'header6']
})
</script>
</body>
複製程式碼

可以在 ofollow,noindex">examples目錄檢視更多細節

選項 OPTIONS

outerContainer

滾動容器的外層容器,用於佔位。

引數：id字串或者dom元素

innerContainer

滾動容器，通常設定一個固定高度以及overflow屬性為auto 或者 scroll

引數：id字串或者dom元素

headers

需要固定在頂部頭部列表

引數：包含頭部id或者dom元素的列表 Array<String: id> 或者 Array< DOM >

介面 API

refresh

當滾動容器中的內容發生變動，導致容器高度變化，需要呼叫此函式重新計算，使吸頂頭部適應新的容器高度

示例

let stickyListHeaders = new StickyListHeaders({
outerContainer: 'outer-container',
innerContainer: 'inner-container',
headers: ['header1', 'header2', 'header3', 'header4', 'header5', 'header6']
})

// 當dom改變後
stickyListHeaders.refresh()
複製程式碼