黏在心中——position: sticky polyfill：stickyfill 源码浅析

2024-01-23 01:55:32

开篇有话说

本人最近在修改 blogsue 中的样式时，使用到了 position: sticky。在此之前，我对 sticky 这个属性的了解甚少。虽然我们平时使用它的机会不多，但实际上它已被广泛应用于知乎、博客园等网站的导航栏中。

作为前端开发领域的一名从业人员，我们需要对 position: sticky 有所了解，以便我们在日后的工作中能够自如使用它。然而，事情却并不像我们想象中那么简单。这个属性兼容性极差，许多浏览器都不支持它。虽然我们能够使用 JavaScript 来模拟它的效果，但这个过程却并不简单。

为了使文章更加系统全面，我决定使用 stickyfill polyfill 来实现这一效果。stickyfill 是一个 JavaScript 库，能够帮助我们在旧浏览器中模拟出 position: sticky 的效果。那么，废话不多说，我们现在就开始解析 stickyfill 的源代码吧！

认识 stickyfill

想要认识 stickyfill，我们首先需要了解一下它的工作原理。在很多情况下，当浏览器解析完 CSS 代码后，它会根据代码中指定的 position 属性值来计算出对应元素的定位方式。这个过程通常称为计算 layout。显然，在大多数情况下，浏览器都能够正确地计算出元素的定位方式。然而，sticky 却是一个比较特殊的属性。因为它是最近才引入 CSS 标准中的，所以很多浏览器在处理 sticky 属性时，都会出现问题。

当浏览器在处理 sticky 属性时，它通常会采用两种不同的方式来计算出元素的定位方式。第一种方式是，浏览器会将 sticky 元素放在正常流中，然后根据 sticky 元素的大小和它的距离来确定它的最终位置。第二种方式是，浏览器会将 sticky 元素从正常流中移除，然后将它放在一个新的上下文中。在这个上下文中，sticky 元素的大小和位置将由 CSS 代码中指定的 top、right、bottom 和 left 等属性来决定。

显然，sticky 的实现方式非常复杂。这也是为什么目前很多浏览器都不支持它，而我们需要使用 stickyfill polyfill 来模拟它的效果。

源代码浅析

在开始介绍 stickyfill 的源代码之前，我们需要先安装它。我们可以使用 npm 命令来安装它。

npm install stickyfill --save

安装完 stickyfill 后，我们就可以在我们的项目中使用它了。我们可以通过以下方式来使用它：

import Stickyfill from 'stickyfill';

Stickyfill.add(element);

现在，我们就可以开始解析 stickyfill 的源代码了。

stickyfill 的源代码主要分为两部分。第一部分是核心代码，这部分代码主要负责模拟出 position: sticky 的效果。第二部分是辅助代码，这部分代码主要负责为核心代码提供一些支持。

核心代码的结构非常清晰，它主要由以下几部分组成：

一个构造函数
一个 start 方法
一个 stop 方法
一个 update 方法

构造函数主要负责初始化一些变量，这些变量主要用于记录 sticky 元素的位置和大小等信息。start 方法主要负责启动 stickyfill，这个方法会将 sticky 元素放在正常流中，然后根据 sticky 元素的大小和它的距离来确定它的最终位置。stop 方法主要负责停止 stickyfill，这个方法会将 sticky 元素从正常流中移除，然后将其放在一个新的上下文中。update 方法主要负责更新 sticky 元素的位置和大小等信息。

辅助代码的结构也比较清晰，它主要由以下几部分组成：

一个 scrollHandler 函数
一个 resizeHandler 函数
一个 touchHandler 函数

scrollHandler 函数主要负责处理滚动事件，这个函数会更新 sticky 元素的位置和大小等信息。resizeHandler 函数主要负责处理窗口大小改变事件，这个函数会更新 sticky 元素的位置和大小等信息。touchHandler 函数主要负责处理触摸事件，这个函数会更新 sticky 元素的位置和大小等信息。