npm（Node Package Manager）是 Node.js 的包管理器，是构建 Node.js 应用程序的必备工具。在前端开发中，我们经常要使用一些 npm 包来扩展功能，提高开发效率。本文将介绍一个使用教程，名为 obstinate 的 npm 包。
1. 外观与功能
obstinate 是一个可以使页面元素保持在可视区域的 npm 包。在页面滚动时，页面元素将保持在原位置不动，直到页面滚动到它们的底部。
通过使用 obstinate，我们可以创建固定的导航栏、悬浮框或者悬浮按钮等，提高页面的交互性和易用性。
2. 安装和使用
在开始使用 obstinate 之前，我们需要先安装它。
npm install obstinate --save
在安装完成后，我们可以通过 import 命令来引入 obstinate 包，并在需要使用的元素上绑定事件处理器。
import obstinate from 'obstinate';
const element = document.querySelector('.nav');
obstinate.fix(element);以上代码中，我们首先通过 import 命令引入了 obstinate 包，然后通过 querySelector 方法获取了需要固定的页面元素，并将其传入 obstinate.fix() 方法中。
3. 指令和配置
obstinate 中包含了一些指令，可以对固定的元素进行进一步的配置。
offsetTop
offsetTop 指令用于设置页面元素离窗口顶部的距离。
obstinate.fix(element, {
offsetTop: 100
});以上代码中，我们将 offsetTop 的值设置为 100，表示页面元素距离窗口顶部的距离为 100px，你也可以根据具体需求调整这个值。
zIndex
zIndex 指令用于设置页面元素的层级。
obstinate.fix(element, {
zIndex: 99
});以上代码中，我们将 zIndex 的值设置为 99，表示页面元素的层级为 99，你也可以根据具体需求调整这个值。
onScroll
onScroll 指令用于设置页面滚动时的回调函数。
obstinate.fix(element, {
onScroll: function() {
console.log('scrolling!');
}
});以上代码中，我们将 onScroll 的值设置为一个回调函数，当页面滚动时，这个函数会被调用。你也可以编写自己的回调函数，以便于更好的处理页面滚动事件。
4. 示例
让我们来看一个完整的示例代码。
-- -------------------- ---- -------
--------- -----
------
------
------------------------
------- ------------------------
-------
---- -
------- -------
-
---- -
------ -----
------- -----
----------- -----
------ -----
-------- -----
---------------- -------
------------ -------
-
--------
-------
------
---- ---------------------- ---------
--------
------ --------- ---- ------------
----- ------- - -------------------------------
-----------------------
---------
-------
-------以上代码中，我们创建了一个固定的导航栏，并使用 obstinate 包将其固定在窗口顶部。具体效果可以通过运行代码进行查看。
5. 总结和思考
obstinate 是一个相对简单易用的 npm 包，通过本文的介绍，你应该已经基本掌握了它的用法和一些指令的作用。在实际开发中，我们可以根据具体需求来进行配置，以便于创建出更加炫酷、实用的页面元素。
同时，在选择 npm 包的过程中，我们也需要注意包的稳定性、维护情况以及开发者社区的活跃程度等因素，以便于选择出最适合自己的开发工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9e3d1de16d83a6709d