当我们需要在网页上实现固定导航栏或悬浮元素等效果时，jquery.sticky 是一个非常不错的选项。本文将介绍如何使用该 npm 包来实现这些效果。
安装
首先，在命令行中使用以下命令安装该包：
npm install jquery.sticky
用法
在安装完成后，在你的项目中引入 jQuery 和 jquery.sticky:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="../node_modules/jquery.sticky/jquery.sticky.js"></script>
接下来，假设我们要实现一个固定在页面顶部的导航栏，HTML 代码可能如下所示：
<nav class="sticky">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>然后，在 JavaScript 文件中添加以下代码：
$(document).ready(function() {
$('.sticky').sticky();
});这里的 .sticky 是我们在 HTML 中定义的导航栏的类名。.sticky() 函数则是 jquery.sticky 包提供的方法，它会将该元素固定在页面顶部。
如果你想使元素固定在页面底部，可以将该方法的参数设置为 {bottomSpacing:}。例如：
$('.sticky').sticky({bottomSpacing: 0});示例代码
下面是一个完整的示例代码，它实现了一个固定在页面顶部的导航栏：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---------- -----------
----- ----------------
------- -----------------------------------------------------------
------- --------------------------------------------------------------
-------
------- -
----------------- -----
--------- -------
---- --
-
------- -- -
------- --
-------- --
---------------- -----
--------- -------
-
------- -- -
------ -----
-
------- -- - -
-------- ------
------ ------
----------- -------
-------- ---- -----
---------------- -----
-
------- -- ------- -
----------------- -----
------ ------
-
--------
-------
------
---- ---------------
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---- ------------------- -------
------- ------- ---------
------
--------
---------------------------- -
----------------------
---
---------
-------
-------通过上述代码，你可以将该效果应用到自己的项目中，并且修改样式以满足自己的需求。
总结
使用 jquery.sticky 可以轻松实现固定导航栏等效果。该包还提供了其他参数，可以进一步控制元素的行为。希望本篇文章能够帮助你更好地理解和应用该 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33840