Stickybits：替代“ position：sticky” polyfills


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

浏览网站时，通常会看到HTML元素（例如横幅和导航）固定在浏览器的顶部和底部。 有两种方法可以完成。

一是position: sticky ，这是CSS的本机功能。 您可以这样使用它：

1
2
3
4
header {
  position: sticky;
  top: -1px;
}

MDN很好地解释了这一点：

粘性定位是相对定位和固定定位的混合。 将该元素视为相对位置，直到它超过指定的阈值为止，此时将其视为固定位置。

第二，您基本上可以使用JavaScript伪造该行为。 您可以测量滚动位置，并根据需要在position: relative （或静态）或position: fixed ）之间切换元素。

我会说这些技术都不是很理想。

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

仅使用本机CSS，您就无法知道元素何时处于一种状态或另一种状态。

Stickybits是position: sticky一种轻量级替代方法（?2KB） position: sticky polyfills。 设置插件很容易，它可以与任何其他插件，库或框架交叉兼容。

使用npm安装：

1
npm i stickybits --save-dev

或者，使用Yarn安装：

1
yarn add stickybits --dev

用法：

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

通过上述开箱即用的解决方案，您现在已将选择器中的任何元素设置为粘性。 无论是否支持position: sticky ，这对于支持.classList的浏览器都适用。

Stickybits，与另外useStickyClasses: true属性集将增加sticky和stuck类元素时变得粘稠或卡住 。 这样可以轻松地基于选定元素变为静态，发粘或粘滞的时间来挂钩CSS样式。 在Dave Rupert在Shop Talk Show Podcast上提到它之后，添加了此有用的实用程序。

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

在CodePen上查看Jeff Wainwright（ @yowainwright ）的Pen Njwpep 。

请参阅Jeff Wainwright（ @yowainwright ）在CodePen上的Pen CSS`position：sticky`示例 。

GitHub上提供了更多示例 。

Stickybits是一个JavaScript插件，用于使HTML元素固定在其父级的浏览器窗口的顶部或底部。 随着position: fixed;的不同实现position: fixed; 和position: sticky; 跨浏览器，要提供高质量的粘性功能是一项挑战。 Stickybits解决了这个问题。

Stickybits的灵感来自FixedSticky从Fillament集团 ，谁最近弃用他们的插件 。

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

翻译自: https://css-tricks.com/stickybits-alternative-position-sticky-polyfills/