滚动列表导航栏吸顶功能的封装

栏目: JavaScript · 发布时间: 6年前

内容简介：因为遇到了这个需求，网上找了一圈也没发现好用的插件，于是就自己写了一个，使用方式简便，已经在项目的好几处用到了这个插件，现分享出来。可以在滚动容器的外层容器,用于占位。

因为遇到了这个需求，网上找了一圈也没发现好用的插件，于是就自己写了一个，使用方式简便，已经在项目的好几处用到了这个插件，现分享出来。

滚动列表头部吸顶效果

安装 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 点这里

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Java Message Service API Tutorial and Reference

Hapner, Mark; Burridge, Rich; Sharma, Rahul / 2002-2 / $ 56.49

Java Message Service (JMS) represents a powerful solution for communicating between Java enterprise applications, software components, and legacy systems. In this authoritative tutorial and comprehens......一起来看看《Java Message Service API Tutorial and Reference》这本书的介绍吧!

码农工具

Markdown 在线编辑器

HEX HSV 转换工具

HEX HSV 互换工具