什么是 holding？
holding 是一个 npm 包，它可以帮助前端开发人员轻松实现在浏览器上的吸附效果。吸附即在浏览器窗口滚动时，将元素固定在一个位置上，直到用户到达另一个位置。
该包被广泛应用于导航栏、侧边栏、悬浮框等吸附效果的实现。
如何使用 holding？
安装 holding
你可以通过以下命令安装 holding：
npm install holding --save
使用 holding
使用 holding，我们需要在元素上调用 Holding() 函数即可：
-- -------------------- ---- ------- ------ ------- ---- ---------- ----- ------- - -------------------------------------- ----- ------- - - ---- --- ------- --- ----------- -------------------- ------------- --------------------- -- ----- ------- - --- ---------------- ---------
holding 的参数
element: 你需要实现吸附效果的元素，可以使用 DOM 选择器获取。options: 包含下面的可选值，可以自定义吸附效果的行为。top: 元素开始吸附的距离浏览器顶部的距离，默认值为 0。bottom: 元素停止吸附的距离浏览器底部的距离，默认值为 0。fixedClass: 元素吸附时的样式类，默认为空。holdingClass: 元素开始吸附时的样式类，默认为空。
其他操作
如果你想删除吸附效果，可以调用 destroy() 方法：
holding.destroy();
示例
在以下示例中，当页面滚动到导航栏的位置时，导航栏将开始吸附，同时添加 .nav--fixed 样式；当页面滚动超过导航栏的位置时，导航栏将停止吸附并删除 .nav--fixed 样式。
import Holding from 'holding';
const nav = document.querySelector('.nav');
const holding = new Holding(nav, {
top: 0,
fixedClass: 'nav--fixed'
});结论
使用 npm 包 holding 可以轻松实现在浏览器上的吸附效果。通过这篇教程，你学会了如何安装和使用该包，以及如何自定义吸附效果的行为。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672593660cf7123b36382