前言
在前端开发过程中，我们经常需要实现一些特定的效果来优化用户体验。其中，页面元素的粘滞效果是比较常见的一种。无论是固定在页面的某个位置上还是在某个视图模块内，任何需要实现粘滞效果的场景都可以使用 npm 包 @wulechuan/dom-stick-on-both-edges。
简介
npm 包 @wulechuan/dom-stick-on-both-edges 是一个轻量级的 JavaScript 扩展包，能够轻松实现在指定容器内的左右相邻两个页面元素始终处于容器的两端。例如，在浏览器窗口宽度改变时，两个页面元素会迅速地靠近或者分离。
安装
要使用 @wulechuan/dom-stick-on-both-edges，您需要在终端或命令提示符中输入以下命令进行安装：
npm install --save @wulechuan/dom-stick-on-both-edges
此命令会将 npm 包 @wulechuan/dom-stick-on-both-edges 安装到当前项目中，并将其自动添加到项目的 package.json 中。
使用方法
要使用 @wulechuan/dom-stick-on-both-edges，您需要按照以下步骤进行设置：
步骤1： 引用
在您的 JavaScript 代码中，使用以下语句引用 @wulechuan/dom-stick-on-both-edges：
import createDomStickOnBothEdges from '@wulechuan/dom-stick-on-both-edges';
步骤2： 设置
在您的 HTML 页面中，使用以下语句设置 @wulechuan/dom-stick-on-both-edges：
<div class="js-stick-on-both-edges">
<div class="js-sticky-left"/>
<div class="js-sticky-right"/>
<div>请注意，“js-stick-on-both-edges”类是必须的。@wulechuan/dom-stick-on-both-edges 会自动查找设置对象中带有类名称“js-sticky-left”和“js-sticky-right”的两个子元素并将它们左右粘滞定位。
步骤3： 建议的 CSS
对于样式的设置，可以使用以下建议：
-- -------------------- ---- ------- ----------------------- - --------- --------- ------- -- - --------------- - --------- --------- ----- -- ---- -- - ---------------- - --------- --------- ------ -- ---- -- -
通过上面的样式设置，可以确保 js-sticky-left 和 js-sticky-right 指定的元素始终可以粘滞在设置的容器左右两侧。
步骤4： 使用
要使用 @wulechuan/dom-stick-on-both-edges，请按以下步骤操作：
-- -------------------- ---- -------
-- --- --- -----
------ ------------------------- ---- -------------------------------------
-- ---
----- ---- - ---------------------------------------------------- -
----- ----
------------- --------- ----- -- -
-- ----------------
--
-------------------- ------------ ------ -- -
-- --- ----------------
--
-------- -- -- -
-- ----------------
--
-------- -- -- -
-- ----------------
--
----------- --------- ---------- -- -
-- ----------------
--
---------- ------ ----- ------ -- -
-- --------------
--
---
-- --
--------------通过以上步骤，您可以轻松的实现指定容器内两个页面元素的粘滞效果。
示例代码
在以下示例代码中，我们将 js-sticky-left 中的元素粘滞在容器左侧，将 js-sticky-right 中的元素粘滞在容器右侧。在窗口大小改变时，两个元素将始终位于容器两侧。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
----------------------------------------- ------------
------- ------------------------------------------------------------------
-------
-------- -
------- - -----
------- --- ----- -----
-------- -----
-
----------------------- -
--------- ---------
------- --
-
--------------- -
--------- ---------
----- --
---- --
-
---------------- -
--------- ---------
------ --
---- --
-
--------
-------
------
---- ----------------
-------------------------------------- ---------
---- -------------------------------
---- -----------------------
-------------
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
------
---- ------------------------
--------------
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
------
------
------------------------------------------------
------
------- -----------------------
-- ------ - --
-- -------------- ---------- --
------ ------------------------- ---- -------------------------------------
----- ---- - ---------------------------------------------------- -
----- ----
------------- --------- ----- -- -
------------------ - ---------
--
-------------------- ------------ ------ -- -
---------------- - ----- - ------
--
-------- -- -- -
--------------------------
--
-------- -- -- -
--------------------------
--
----------- --------- ---------- -- -
---------------- - ------- - ------
--
---------- ------ ----- ------ -- -
------------------- - ------
--
---
--------------
---------
-------
-------在上面的示例中，我们建议为容器元素（.js-stick-on-both-edges）添加额外的 CSS 设置以实现最佳的浏览效果。粘滞效果的设置可以通过 createDomStickOnBothEdges 构造函数中的多种属性来自定义，例如 mode，onViewResize 等。
如何贡献
如果您有兴趣为 npm 包 @wulechuan/dom-stick-on-both-edges 增加功能或改进代码的话，请参考项目文档中的“如何贡献”部分进行相关操作。在 GitHub 上提出问题或提交 Pull Request 是最快捷和最简单的方法。我们欢迎各种贡献，包括但不限于代码、文档、测试，以及 Issue 的提交和解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005563081e8991b448d31a7