scrollgress 是一个用于监测滚动位置并触发事件的 npm 包。它是基于 jQuery 开发的，可以帮助开发者实现对元素滚动位置的追踪和处理。
安装
首先，在终端中进入你的项目根目录，使用 npm 安装 scrollgress：
--- ------- -----------
另外，为了使用 jQuery，你还需要在 HTML 文件中引入 jQuery 库：
------- -----------------------------------------------------------
使用方法
初始化
要使用 scrollgress，你需要将其引入你的 JavaScript 文件，并为指定元素初始化一个 scrollgress 实例：
------ - ---- --------- ------ ----------- ---- -------------- ----- --------- - -------------------------------------- ----- ------------- - --- -----------------------
这里，我们首先通过 querySelector 方法找到了我们想要监测滚动位置的元素，然后将其传入了 Scrollgress 的构造函数中。通过这样的方式，我们就创建了一个新的 scrollgress 实例，并将其存储在 myScrollgress 变量中。
监测滚动位置
一旦我们成功初始化了 scrollgress 实例，我们就可以开始监测元素的滚动位置了。通过设置 onProgress 回调函数，我们可以获取当前元素已经滚动过的百分比：
----------------------------------- -- - -------------------- --- ---- -------- --------------- ---
这里，onProgress 方法接收一个回调函数作为参数。每当元素被滚动时，scrollgress 都会调用这个回调函数，并将当前已经滚动的百分比传递给它。我们可以在这个回调函数中实现任何自己想要的行为。
触发事件
除了监测滚动位置之外，scrollgress 还支持触发事件。通过设置 onEnter 和 onLeave 回调函数，我们可以在元素进入和离开视野时执行相应的操作：
------------------------ -- - -------------------- --- ------- --- ----------- --- ------------------------ -- - -------------------- --- ---- --- ----------- ---
这里，onEnter 和 onLeave 方法都接收一个回调函数作为参数。当元素进入或离开视野时，scrollgress 会调用相应的回调函数，并执行其中的操作。
示例代码
下面是一个完整的示例代码，它演示了如何初始化 scrollgress 实例并监测元素的滚动位置。在这个示例中，我们在元素滚动到不同的位置时，改变了元素的背景色：
--------- -----
------
------
----- ----------------
------------------ ---------------
-------
----------- -
------- -------
----------------- --------
----------- ---------------- ---
-
------------------------------ -
----------------- --------
-
------------------------------ -
----------------- --------
-
------------------------------ -
----------------- --------
-
------------------------------- -
----------------- -----
-
--------
-------
------
---- -------------------------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------------
--------
----- --------- - --------------------------------------
----- ------------- - --- -----------------------
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------