keep-element-in-view 是一个方便而实用的前端 npm 包，它可以自动将指定的 DOM 元素固定在浏览器窗口中，使其不被滚动条遮挡。在实际的开发中，这个工具让开发者可以更加自由地控制页面布局，提升用户体验。
安装
可以通过 npm 安装 keep-element-in-view，命令如下：
npm install keep-element-in-view
或者，直接在 html 文件中通过 CDN 的方式引入 keep-element-in-view，如下所示：
<script src="//unpkg.com/keep-element-in-view"></script>
使用
使用 keep-element-in-view 的步骤如下：
- 引入
keep-element-in-view的库。
import keepElementInView from "keep-element-in-view";
- 选择需要固定在视口中的元素。可以通过 jQuery 或者原生 JavaScript 选择元素。
const el = $(".header");- 调用
keepElementInView方法，从而让元素固定在视口中。
keepElementInView(el, {
top: 0,
debug: true
});keepElementInView 方法需要传入两个参数：
要固定的元素的选择器或者元素对象。
参数对象，参数对象中可以包含如下的属性：
top：表示距离视口顶部的距离。默认值为0。bottom：表示距离视口底部的距离。默认值为0。debug：表示是否开启调试模式，调试模式下会在控制台中输出调试信息。默认值为false。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------- ------------
-------
---- -
------- --
-------- --
------- -------
-
------- -
--------- ------
---- --
----- --
------ -----
----------- -----
------- -----
----------- -------
------------ -----
---------- -----
-
-------- -
----------- -----
-
--------
-------
------
---- ---------------
------
------
---- ----------------
----- ----- ----- --- ---- ----------- ----------- ----- -
---
------
------- ------------------------------------------------
--------
----- -- - -------------
--------------------- -
---- --
------ ----
---
---------
-------
-------指导意义
keep-element-in-view 是一个轻量级的 npm 包，可以帮助前端开发人员快速实现元素在视口中的固定。通过使用该工具，可以让页面布局更为灵活，提高用户体验。
推荐使用该工具的场景包括：
- 在页面中使用固定的导航条、悬浮框等元素。
- 当页面滚动时，需要始终让某个元素保持在视口中时。
最后需要注意的是，使用 keep-element-in-view 库时，需要确保所选的元素有固定的位置（如使用了 position: fixed 或者 position: sticky），否则无法起到期望的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efd4c49986ca68d8a81