@zhinan-oppo/shared

sticky

Install

使用 yarn 安装

yarn add @zhinan-oppo/sticky

引用方式

import { initStickyElement, initAllBySelector } from '@zhinan-oppo/sticky';

接口

• initStickyElement(element, options)
  • 参数element是需要被设置为黏性布局的 HTMLElement
  • 参数options是可选的object，包含以下属性
    • container: 可选，默认为element.offsetParent
      • 如果container未指定且element.offsetParent为null，会报错，具体参见：offsetParent
    • scrollHandlers: 可选，传递给scrollHandle的回调函数，具体参见：scrollHandle
• initAllBySelector(selector, root)
  • 参数selector是可选的字符串，传递给root.querySelectorAll，所有被选中的 element 会逐一传入到initStickyElement中以默认参数初始化
  • 参数root是可选的 DOM 节点，默认为window.document

Instruction (Examples)

sticky 布局

粘性布局的 JS 实现方法。sticky-container 为布局容器，sticky-item 为具体的粘性元素。

向下滚动时：

• 当 sticky-container 的上边界触碰到屏幕顶部，sticky-item 变为 fixed，表现为粘在屏幕上

• 当 sticky-item 的底部和 sticky-container 的底部贴在一起时，sticky-item 变为 absolute，随 sticky-container 正常滚走。

• sticky 布局介绍

initStickyItem:手动初始化.sticky-item

<div class="sticky-container" style="position: relative">
  <div class="sticky-item" id="sticky">
  </div>
</div>

const element = document.getElementById('sticky');
initStickyItem(element, {
  // scrollHandlers 实际上是监听在 container 上的
  scrollHandlers = {
    always: (dom, distance, total) => {},
  },
});
initStickyItem(element, {
  container = element.offsetParent,
  scrollHandlers = {
    always: (dom, distance, total) => {},
  },
});

initAllBySelector: 将所有 class 列表中带sticky-item的元素都设置为黏性布局

<div class="sticky-container" style="position: relative">
  <div class="sticky-item">
  </div>
</div>

import { initAllBySelector } from '@zhinan-oppo/sticky';
document.addEventListener('DOMContentLoaded', event => {
  initAllBySelector('.sticky-item');
});