在前端开发中，垂直滚动条是一个很重要的组件。而通过添加或删除类可以增强网页的交互性能和可读性。本文将介绍如何使用 jQuery 实现基于垂直滚动条添加/删除类的功能。
添加类
我们可以通过监听滚动事件来实现添加类的功能。下面是一个示例代码：
--------- -----
------
------
----- ----------------
------------------ --------------
------ ----------------
---- -
------- -------
----------------- -----
-
------- -
------ ----
-
--------
------- -----------------------------------------------------------
------- -----------------------
---------------------------- -
--------------------------- -
--- --------- - --------------------
------------------------- -
--- ----------- - ---------------------
-- ------------ - --------- - --- -- ----------- - --------- - ------------------ -
---------------------------
- ---- -
------------------------------
-
---
---
---
---------
-------
------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
-------
-------在上面的代码中，我们首先定义了一个包含多个 box 元素的页面。然后通过 CSS 设置了这些元素的高度和背景颜色，并定义了一个 active 类用于标记当前可见的元素。
接着，我们使用 jQuery 监听窗口的滚动事件，并遍历每个 box 元素。对于每个元素，我们获取其距离文档顶部的距离，并判断其是否在当前可视区域内。如果是，则添加 active 类；否则，移除该类。
删除类
除了添加类，我们也可以通过类似的方式删除类。下面是一个示例代码：
--------- -----
------
------
----- ----------------
------------------ --------------
------ ----------------
---- -
------- -------
----------------- -----
-
------- -
-------- -----
-
--------
------- -----------------------------------------------------------
------- -----------------------
---------------------------- -
--------------------------- -
--- --------- - --------------------
------------------------- -
--- ----------- - ---------------------
-- ------------ - --------- - --- -- ----------- - --------- - ------------------ -
------------------------------
- ---- -
---------------------------
-
---
---
---
---------
-------
------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
-------
-------在上面的代码中，我们定义了一个与添加类示例相似的页面，但是这次我们使用了一个 hidden 类来标记需要隐藏的元素。
同样地，我们监听窗口的滚动事件，并遍历每个 box 元素。对于每个元素，如果其不在当前可视区域内，则添加 hidden 类；否
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24551