Stickybits：`position: sticky` 的 Polyfill 替代方案

Stickybits 是一个小型 JavaScript 实用程序插件。它的目标是不妨碍其他功能。它只做好一件事：帮助处理粘性元素。它不依赖于其他 JavaScript 插件，可以通过 npm 导入，并且以非常实用导向的方式处理粘性元素。

解决粘性元素问题可能会导致棘手的情况

在浏览网站时，常见的情况是看到 HTML 元素（如横幅和导航）粘附在浏览器顶部和底部。有几种方法可以实现这一点。

一种是使用 `position: sticky`，这是一个原生 CSS 功能。您可以像这样使用它

header {
  position: sticky;
  top: -1px;
}

MDN 对其进行了很好的解释

粘性定位是相对定位和固定定位的混合。元素被视为相对定位，直到它越过指定的阈值，此时它被视为固定定位。

第二种方法，您可以使用 JavaScript 模拟这种行为。您可以测量滚动位置，并在需要时将元素在 `position: relative`（或 static 或其他任何值）和 `position: fixed` 之间切换。

我认为这两种技术都不够理想。

通过自己进行切换，当这些元素从固定位置变为非固定位置时，可能会出现跳动。在移动设备浏览器中，此问题会更加严重。

仅使用原生 CSS，您无法知道元素处于哪种状态。

使用 StickyBits 获取两全其美

Stickybits 是 `position: sticky` polyfill 的轻量级（约 2KB）替代方案。它是一个易于设置的插件，与任何其他插件、库或框架兼容。

使用 npm 安装

npm i stickybits --save-dev

或者，使用 Yarn 安装

yarn add stickybits --dev

用法

stickybits('[your-sticky-selector]');

使用以上开箱即用的解决方案，您现在可以将任何具有您选择器的元素设置为粘性。这适用于支持 .classList 的浏览器，无论是否支持 `position: sticky`。

Stickybits，在设置了额外的 `useStickyClasses: true` 属性后，将在元素变为 sticky 或 stuck 时添加 `sticky` 和 `stuck` 类。这使得根据所选元素何时变为静态、sticky 或 stuck 来连接 CSS 样式变得很容易。这个有用的实用程序是在 Dave Rupert 在 Shop Talk Show Podcast 中提到之后添加的。

Stickybits 还提供偏移属性和清理方法钩子，以帮助更好地管理其粘性状态。

演示

查看 Jeff Wainwright (@yowainwright) 在 CodePen 上的笔 Njwpep。

查看 Jeff Wainwright (@yowainwright) 在 CodePen 上的笔 CSS `position: sticky` 示例。

更多演示在 GitHub 上提供。

结论

Stickybits 是一个 JavaScript 插件，用于使 HTML 元素粘附在浏览器窗口在其父元素内的顶部或底部。由于浏览器对 `position: fixed;` 和 `position: sticky;` 的实现存在差异，因此创建高质量的粘性功能具有挑战性。 Stickybits解决了这个问题。

Stickybits 的灵感来自 FixedSticky，该插件由 Fillament Group 创建，他们最近 弃用了该插件。

它由 Dollar Shave Club 开源，由我们的团队和我维护。