在前端开发过程中，有时候需要实现一些滚动时固定在页面某个位置的元素，例如顶部导航栏、侧边栏等等。要实现这个功能，最原始的方法就是监听滚动事件，然后通过 JS 动态改变元素的位置。
不过，这种做法存在某些问题：
- 容易出现闪烁问题，因为滚动事件触发频率很高，每次都重新计算元素位置，造成性能问题。
- 逻辑复杂，需要兼容各种不同的浏览器。
- 在手机端滚动时会出现卡顿和停顿，影响用户体验。
为了解决这些问题，出现了一些成熟的 JavaScript 库，例如 StickyJS、Sticky-Kit 等等。这些库封装了复杂的逻辑，提供了非常简单易用的 API，使得开发者可以轻松地实现固定定位效果。
而 ngx-stickybits 就是这样一款非常优秀的 Sticky 库。它支持 Angular 项目，可以很方便地实现粘性吸底效果。下面就让我们来详细了解一下 ngx-stickybits 的使用教程。
安装
要使用 ngx-stickybits 库，首先需要安装它。可以使用 npm 进行安装，命令如下：
npm install ngx-stickybits --save
使用方法
在 Angular 项目中，使用 ngx-stickybits 库非常简单。首先需要在模块中引入 StickyBitsDirective，像这样：
-- -------------------- ---- ------- ------ - ------------------- - ---- ----------------- ----------- ------------- - ------------- ------------------- -- -------- - ------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
然后在 HTML 中，可以直接使用 appStickyBits 指令设置需要粘性吸底的元素。例如下面这个示例，使用 appStickyBits 指令实现了顶部导航栏在页面滚动时固定在顶部的效果。
-- -------------------- ---- ------- ---- ------------- ------------ -- ----------------- -- ------------------ -- -------------------- ------ ---- ------------- --- ------展开代码
注意：
appStickyBits指令需要设置在需要粘性定位的元素上，并且需要设置id属性，以便在样式中进行定位。
最后，在样式文件中，需要设置被固定的元素的样式。例如下面这个示例，设置了顶部导航栏固定在顶部时的样式：
#header.sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; }
API
除了 appStickyBits 指令之外，ngx-stickybits 库还提供了一些其他的 API，可以更加精细地控制粘性吸底效果。
stickybits.setOption(options: StickybitsOptions)
该方法用于设置全局 Sticky 配置。options 参数是一个对象，可以包含以下配置项：
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
stickyBitStickyOffset |
number | 0 | 吸顶偏移量，用于设置顶部吸顶后与顶部的距离。 |
useStickyClasses |
boolean | false |
是否使用 sticky 类名。 |
useFixedClasses |
boolean | false |
是否使用 fixed 类名。 |
例如下面这个示例，设置了 stickyBitStickyOffset 为 50：
import { stickybits } from 'ngx-stickybits'; ... stickybits.setOption({ stickyBitStickyOffset: 50 });
appStickyBitsInput
在 HTML 中，可以通过 appStickyBitsInput 指令设置粘性吸底的相关配置。例如下面这个示例，设置了吸顶后与顶部的距离为 50：
<nav appStickyBits appStickyBitsInput="{stickyBitStickyOffset: 50}" id="header"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav>
stickyElements
在 JavaScript 中，可以使用 stickyElements 属性获取所有 Sticky 元素的实例。例如下面这个示例，获取了所有的 Sticky 元素对象，并设置了它们的 stickyBitStickyOffset 为 50。
-- -------------------- ---- ------- ------ - ------------- - ---- ----------------- --- ----- --------------- --------------- - -------------------------- ------------------------------ -- - ------------------- ---------------------- -- --- ---展开代码
总结
ngx-stickybits 是一款非常方便易用的 Sticky 库。它封装了复杂的逻辑，提供了简单易用的 API，使得开发者可以快速地实现固定定位效果。在使用该库的时候，需要注意设置相关的 HTML 属性和样式，否则可能会出现不良现象。同时，还需要掌握一些 API 的使用方法，便于进一步优化和扩展 Sticky 功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734e890c4f72775837c7
