粘贴页眉

这个库允许您创建粘贴头. 用这个 position: sticky 和交叉观察员.

插件不需要jQuery,但如果jQuery存在于页面上,它会加入到jQuery中.

安装

使用 npm(或纱线)来安装软件包.

npm install --save @codingheads/sticky-header

在 JavaScript 中初始化

要初始化库,您需要创建一个新的实例 StickyHeader 类 :

import StickyHeader from '@codingheads/sticky-header';

const header = document.querySelector('header.page-header');
new StickyHeader(header, options);

或使用 j 查询 :

import '@codingheads/sticky-header';

$('header.page-header).stickyHeader(options);

选项对象可具有以下属性:

• mainClass - 插件初始化时添加的类( 默认 ): sticky(中文(简体) )
• pinnedClass - 元素变成"粘"时添加的类别(默认: sticky-pinned(中文(简体) )
• unpinnedClass - 当元素变成"不粘"时,该类添加(默认: sticky-unpinned(中文(简体) )
• offset - 元素应当成为“ stuck” (默认: 0) 的偏移( 像素)
• addBodyClasses - 增加一个 pinnedClass 财务报告和审定财务报表 unpinnedClass 分类到正文元素(默认:真实)

警告

1. 该插件使用 position: sticky。这在所有现代浏览器中都得到了支持。 不过, position: sticky 具有一些要求: 您不能有父元素 overflow: hidden,否则无效(该位置将静止)。 如果无法启动,请检查是否没有 overflow: hidden 在父元素上.

2. 如果您根据"stuck"/"unstuck"的状态更改了标题大小,可能需要防止窗口在这样的情况下滚动(标题会将内容推后).

如果你有一个 #wrapper 元素围绕内容(包括标题),您可以做这样的事情:

header.sticky {
  top: 0;
  position: sticky;
}

/** fix for when the header grows in size when it becomes unpinned and the scroll position changes (we need to scroll more) **/
@supports (position: sticky) {
  body.sticky-unpinned #wrapper {
    overflow-anchor: none;
  }
}