介绍
@wearejust/sticky 是一个基于 jQuery 开发的粘性导航插件，可以在页面滚动的过程中保持导航条在屏幕上方，让用户方便快捷地访问各个部分。
安装
使用以下命令进行安装：
npm install @wearejust/sticky --save
使用教程
- 引入 jQuery
这是一个基于 jQuery 开发的插件，所以需要先引入 jQuery。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
- 引入 @wearejust/sticky
<script src="node_modules/@wearejust/sticky/dist/jquery.sticky.min.js"></script>
- HTML 结构
在页面中添加需要粘性导航的 HTML 结构，如下所示：
-- -------------------- ---- -------
---- -----------------------
---- ---------------
----
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
-----
------
------
---- ------------- ----------------
----------- ------
----------
------
---
- 初始化插件
$('.sticky').sticky();配置项
可以通过传入不同的配置项来自定义插件的表现。以下是一些常用的配置项：
$('.sticky').sticky({
topSpacing: 0, // 离顶部的距离
bottomSpacing: 0, // 离底部的距离
zIndex: 'auto', // z-index 的值
className: 'is-sticky' // 添加到固定导航上的 class
});示例代码
可以查看以下示例代码来更好地了解如何使用 @wearejust/sticky 插件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------------------ ------------
----- ---------------- -----------------
-------
------
---- -----------------------
---- ---------------
----
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
-----
------
------
---- ------------- ----------------
----------- ------
----------
------
---- ------------- ----------------
----------- ------
----------
------
---- ------------- ----------------
----------- ------
----------
------
---- ------------- ----------------
----------- ------
----------
------
------- ------------------------------------------------------------------
------- ------------------------------------------------------------------------
--------
---------------------------- -
---------------------
----------- --
-------------- --
------- -------
---------- -----------
---
---
---------
-------
-------结语
@wearejust/sticky 是一个简单而又实用的粘性导航插件，可以提高用户的访问体验，同时也为开发者提供了方便快捷的开发方式。希望本文对大家有所帮助，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b49c6eb7e50355dbf90