在前端开发中，经常会遇到需要将某个元素固定在页面顶部或底部的需求。在此类场景下，我们可以使用 npm 包 react-sticky-nrp 来轻松地实现这一功能。
安装
react-sticky-nrp 的安装非常简单，只需要在项目目录下运行以下命令即可：
npm install react-sticky-nrp --save
引入
在组件中引入 react-sticky-nrp，并在需要固定的元素上使用 Sticky 组件进行包裹。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------
------ ------- -------- ----- -
------ -
--
--------
---------------------
---------
---- --------------------------------
--------
---------------------
---------
---
--
-API
Sticky 组件支持以下属性：
topOffset: number
设置元素离窗口顶部多少像素时触发固定，默认为 0。
<Sticky topOffset={100}>
<header>我的网站</header>
</Sticky>bottomOffset: number
设置元素离窗口底部多少像素时触发固定，默认为 0。
<Sticky bottomOffset={50}>
<footer>版权所有</footer>
</Sticky>positionRecheckInterval: number
设置固定元素的位置检查频率（毫秒），默认为 50。
<Sticky positionRecheckInterval={100}>
<header>我的网站</header>
</Sticky>relative: boolean
是否相对于父元素而非视窗固定，默认为 false。
<Sticky relative> <header>我的网站</header> </Sticky>
disableHardwareAcceleration: boolean
是否禁用硬件加速，默认为 false。
<Sticky disableHardwareAcceleration> <header>我的网站</header> </Sticky>
示例
以下示例演示了如何使用 react-sticky-nrp 在 React 中实现一个网站布局，其中包含了固定在顶部和底部的导航栏和版权信息。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------
------ ------- -------- ----- -
------ -
--
--------
--------------
---------
---- --------------------------------
--------
---------------------
---------
---
--
-这样就能轻松地实现网站布局中的固定元素，不仅能提高页面的可用性，而且可以更好地提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3e81e8991b448db094