2. 程式人生 > >滾動列表導航欄吸頂功能的封裝

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

阿新 • • 發佈：2018-11-22

前言

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

滾動列表頭部吸頂效果

gif1

安裝 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>
        <h1  id="header2">標題2</h1>
        <p
 
>列表文字</p>
        <p>列表文字</p>
        <p>列表文字</p>
        <h1  id="header3">標題3</h1>
        <p>列表文字</p>
        <p>列表文字</p>
        <p>列表文字</p>
        <h1  id="header4">標題4</h1>
        <p>列表文字</p>
        <p
 
>列表文字</p>
        <p>列表文字</p>
        <h1  id="header5">標題5</h1>
        <p>列表文字</p>
        <p>列表文字</p>
        <p>列表文字</p>
        <h1  id="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>
複製程式碼

可以在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()
複製程式碼

更多 more

issue star or fork 點這裡

相關推薦

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

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

Vue 事件監聽實現導航欄吸頂效果（頁面滾動後定位）

所說的吸頂效果就是在頁面沒有滑動之前，導航欄的效果如下圖所示：當頁面向上滑動之後，導航欄始終固定在頁面的上方。具體程式碼：寫入事件監聽，監聽滾動條。mounted () { // 事件監聽滾動條 window.addEventListener('scroll', this.watchS

移動端HTML5導航欄吸頂：IOS（sticky）和Android兩種實現方式

混合App，前端H5頁面，實現導航欄滑動到的時候貼頂。 注意： 首先寫的時候，監聽scroll事件，滑動到指定位置時改為定位 position:fixed;，實際運用過程中，IOS無法實時監聽scroll事件，在滾動停止之後才觸發的 $(wind

jquery實現導航欄吸頂效果（簡潔版）

憋說話，直接上程式碼，先是最最重要的js：   $(function(){     var a = $('#course-tab'),       b =a.offset();//返回或設定導航欄相

實現滾動到一定位置時，導航欄置頂的效果

html部分: <body> <h1>標題1</h1> <h1>標題2</h1> <h1>標題1</h1> <h1>標題2</h1> <div cl

React制作吸頂功能總結

onscroll 生命 制作 百度 dom元素 展示 document react width 總結一下最近用react寫項目時，遇到的一些坑，恩，真的還蠻坑的，主要是設置狀態的時候特別不好控制，下面我們一起來看下，這裏自己做了幾個demo，分別看下， 主頁面代碼如

類似吸頂功能解決io不能實時監聽onscroll的觸發問題

內核 所有 ble 解決 classname 監聽 頁面 osi window 問題：近期項目需要一個類似西東功能，當頁面向上滾動160px後div固定在頂部 解決方法：首先，想到的是window.onscroll方法 　　.fixed{position:fixed;-we

在UWP中頁面滑動導航欄置頂

效果圖 路由 .html bject 完成 我們 end 鼠標滾輪 istview 原文:在UWP中頁面滑動導航欄置頂最近在研究掌上英雄聯盟，主要是用來給自己看新聞，順便copy個界面改一下段位裝裝逼，可是在我copy的時候發現這個東西 當你滑動到一定距離的時候導航欄會置

實現滾輪監聽，導航欄置頂的效果。

nav idt ack doc color win ID cti col 為了項目的制作，需要一個導航欄置頂的效果，遇到了點難度，但還是克服了，通過比較導航和滾動條的高度實現置頂效果 <div id="daohang" style="width:100%;heig

隨著滾動條滾動，導航欄的動畫互動

以 http://www.alloyteam.com/ 為例子 我來給大家做出詳細解答 以下為初始演示 當滾動條滾動樣式如下 下面我就教你如何實現這個樣式 這是這個網站導航條的樣式 它並沒有設定背景顏色，只是因為固定定位，導航條在網頁不佔空間，使得它懸浮在下面輪播圖的上方，所以給人視覺

adjustResize模式下ExpandaleListView中輸入框焦點錯亂及佈局底部的導航欄被頂在鍵盤上方的處理

　　為了更好的使用者體驗，煎熬了許久，得到這麼個解決方案。在此記錄下來，以供後來者參考。 　　第一部分 　　　　清單檔案中元件activity的android:windowSoftInputMode屬性值的含義：　 　　　　【A】stateUnspecified：軟鍵盤的狀態並沒有指定，系統將選擇一個合

js實現頁面滾動切換導航欄/點選導航欄跳轉到指定位置

最近一直在弄頁面的事情，對頁面方面的知識又鞏固了一下。這次的內容如題，大家對程式碼有疑問或者是有更好的方法歡迎留言！js部分        //標題物件      var title = document.getElementById("title");        //選

小程式 滑動選單欄吸頂效果 抖動優化

  1. 先來看一下未滑動的效果，（樣式隨便寫的，希望儘量簡單）       2.滑動到選單欄之後的吸頂效果        3. 我的html佈局，小程式我用的是mpvue寫的，使用了scss，可以自行下載d

如何用jQuery實現在滑鼠滾動後導航欄保持固定

要實現如下效果，滑鼠滾動後，上方導航欄置頂固定 關鍵html程式碼： <div class="header-bottom"> <div class="container"> <div class="logo">

螢幕滾動 固定導航欄

$(function () { $(window).scroll(function () { //獲取頁面捲曲出去的高度和.top的div的高度對比 if($(document).scrollTop()&

滑鼠滾動改變導航欄進度

官網 滾動事件 function scrollBar() { if (document.body.clientWid

吸頂動畫 側邊欄 監聽滾動條位置 監聽元素距離頂部高度

需求：當頁面中某一標籤到達頁面頂部時，固定在頁面上，否則隨頁面一起滾動，看下邊效果圖。 實現思路： 1.監聽滾動條移動事件。 2.獲取標籤距離頂部距離。 3.當滾動條滾動距離大於標籤距離頂部距離時，固定標籤在某一位置。 具體步驟： 1.首先監聽滾動條事件 window.addEventListener("

ios 導航欄 點擊barbutton的按鈕 下拉列表

pro source war sin nload mutable mst kit with 環境：xocde5.0.2+ios7.0.1 1、導航欄 ----點擊科目--------下拉列表 代碼：NGRightTableViewViewControlle

UIScrollView滾動時隱藏底部導航欄問題

art side silver iscroll trac import isp tom 底部導航 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSLog(@"開始滾動"); int c

h5移動端常見虛擬鍵盤頂起底部導航欄解決辦法

底部 size 當前 發生 解決 lse ide cti () 在h5移動端開發中相信很多朋友跟我一樣都會遇到頁面底部導航被虛擬鍵盤頂起的問題，自己在網上找到的解決辦法拿出來與大家分享，有不完美之處還望見諒，有更好的解決辦法可以貼出來大家一起互相學習！！ var