简介
npm 是 Node.js 包管理器，提供 Node.js 的生态系统。我们可以在其中搜索各种开源项目以及所需的工具包，也可以将自己的项目打包发布到 npm 上面。jd-sticky 是一款可以让元素固定在页面中的纯 JavaScript 组件，它可以依照滚动位置对元素进行定位，非常适用于一些需要固定顶部或底部的元素。
安装
可以使用 npm 命令行工具安装 jd-sticky 包，命令如下：
npm install jd-sticky --save
使用
在页面中引入 jd-sticky，然后调用其方法即可将需要固定的元素固定在指定区域了。示例代码如下：
-- -------------------- ---- -------
---- -- --------- ---
------- -------------------------------------------------------
--------
-- ----
--- ---- - ---------------------------------------
-- ------
--- --------- - --------------------------------------------
-- -- ---------
--- -------------- -
---------- ----------
---- ---
------- ---
------- ---
---
---------可以看到，在调用 new JdSticky 时，需要传入两个参数：元素和配置项。其中配置项具体说明如下：
container：指定固定区域，可以是一个元素或者是一个选择器字符串；top：指定元素固定在页面上方时距离顶部的距离，单位是像素；bottom：指定元素固定在页面下方时距离底部的距离，单位是像素；zIndex：指定元素固定时的层级顺序。
此外，还可以使用 destroy 方法来解除指定元素的固定状态，代码如下：
JdSticky.destroy(elem);
实战
在实际使用中，我们可以将 jd-sticky 应用在一些需要固定顶部或底部的元素上，比如页面顶部的导航栏、广告悬浮框以及底部的返回顶部按钮等。下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
-------
---- -
--------- ---------
----------------- --------
------- -----
------------ -----
---------- -----
------ -----
----------- -------
-
--- -
--------- ---------
----- ----
---- ------
------ ------
------------ -------
----------------- -----
------- ------
------------ ------
------ -----
----------- -------
-
------------ -
--------- ------
------ -----
------- -----
------ -----
------- -----
----------------- --------
------------ -----
------ -----
---------- -----
----------- -------
------- --------
-
--------
-------
------
---- ----------- ---------------------- ----------
---- ---------- ----------------------------------
---- -------------- -------------
-- ------------------- ------------------- ---------------------------
------- -------------------------------------------------------
--------
------------- - -------- -- -
-- -----
--- ----------------------------------------------- -
---- -
---
-- -------
--- ---------------------------------------------- -
---------- --------------
---- ----
------- ---
---
-- --------
--- --------------------------------------------------- -
------- --
---
-- ----------
------------------------------------------------- - -------- -- -
------------------ ---
-
-
---------
-------
-------该示例中，除了导航栏和广告悬浮框的固定时需要指定固定区域外，其它元素只需指定自己距离顶部或底部的距离即可。
总结
npm 包 jd-sticky 是一款实用的 JavaScript 组件，可以让页面中的元素固定在指定区域。在使用时需要注意指定固定区域和距离顶部或底部的距离参数。在实际应用中，我们可以将 jd-sticky 应用在一些需要固定顶部或底部的元素上，提高页面的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672673660cf7123b3656f