简介
fsvs 是一个轻量级的前端页面滚动监听库，它通过监听浏览器窗口滚动事件，触发相应的回调函数来实现对页面滚动位置的监控和控制。在前端页面开发中，我们经常需要根据滚动位置来实现各种效果，如导航栏固定、图片懒加载、无限滚动等。fsvs 可以让这些功能的实现变得更加简单。
安装
使用 npm 进行安装：
--- ------- ----
或者直接下载压缩包 fsvs.zip，解压后将 dist/fsvs.min.js 引入项目即可。
使用方法
- 在 HTML 中引入 fsvs.min.js：
------- -----------------------------------
- 初始化 fsvs：
--- ---- - --- ------
-- -------
---在初始化时可以传入一些配置选项，如下所示：
--- ---- - --- ------
------ ---- -- ----------
------ ---- -- ----------
------- --------------- -- ----
---------- ----------- -- --------------- - -------------
------------------ ----- -- ------------
---------------- ----- -- ------------
--------- ------ -- -------- ---- ---
----------- ----- -- --------------
----------- ----- -- -----
----- ---- -- ----
---其中，fixedItems 可以设置固定在页面上的元素，在滚动时始终保持不变。例如：
--- ---- - --- ------
----------- --------- --------
---- 定义回调函数：
---------------------------------- --------------- ------ -
-- ------------
---
--------------------------------- --------------- ------ -
-- ------------
---- 编写 HTML 代码：
---- ------------- ------------------------- ---- ------------- ------------------------- ---- ------------- ------------------------- ---
每个需要监控的元素都需要加上 data-fsvs-slide 属性。
示例代码
下面是一个简单的示例代码，实现了一个滚动菜单和一些滚动效果：
--------- -----
------
------
----- ----------------
----------- ------------
------- -----------------------------------
-------
------ -
------- ------
----------------- -----
-
----- -
--------- ------
---- --
----- --
------ --
------- -----
----------------- -----
-------- -----
-
----- - -
-------- -------------
-------- -----
------------- -----
---------- -----
------ -----
---------------- -----
-
----- -------- -
------ -----
----------------- -----
-
--------
-------
------
---- ----------
-- -------------
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------