0.0.2 • Published 4 years ago
scroll-affix v0.0.2
scroll-affix
A lightweight lib for making navigation elements affix as you scroll.
在滚动时激活固钉的轻量级库。
Related
v-scroll-affix: A version of vue component. Vue 版本。
Live Demo
Installation
npm install scroll-affix --save
Usage
<div class="container">
<div class="main">
this is main section.
</div>
<div class="right-menu">
<!-- 把 .affix-bar 初始化为浮动元素 -->
<div class="affix-bar">
<ul>
<li>this is a list</li>
<li>this is a list</li>
<li>this is a list</li>
<li>this is a list</li>
<li>this is a list</li>
<li>this is a list</li>
</ul>
</div>
</div>
</div>
// window
// const ScrollAffix = window['ScrollAffix'];
// commonjs like
// const ScrollAffix = require('scroll-affix');
// es module, typescript
import ScrollAffix from 'scroll-affix';
new ScrollAffix({
el: document.querySelector('.affix-bar'), // 要浮动的元素
offsetTop: 20, // 浮动的 y 轴偏移量
// maxScrollHeight() { // 自定义可浮动区域的最大高度, number | ()=>number
// const mainEle = document.querySelector('.main') as HTMLElement;
// return getAbsPoint(mainEle).y + mainEle.offsetHeight;
// },
sectionSelector: '.main' // 根据关联区域动态获取可浮动区域最大高度
});
Options
name | type | default | description |
---|---|---|---|
el | HtmlElement | element to affix 要浮动的元素 | |
offsetTop | number | 0 | offsetTop to affix element 浮动的 y 轴偏移量 |
maxScrollHeight | number 、()=>number | max height to affix element 自定义可浮动区域的最大高度 | |
sectionSelector | string | get max height to affix element by section element 根据关联区域动态获取可浮动区域最大高度 |