介绍
fixed-sticky 是一个基于 CSS position 属性实现的指令，可以帮助我们解决元素在页面滚动过程中需要切换定位方式（比如从 position: relative 变为 position: fixed）的问题。fixed-sticky 指令可以自动识别浏览器是否支持 CSS Sticky 属性，如果支持则使用 Sticky 实现效果，否则使用 JavaScript 实现。
安装
通过 npm 进行安装：
npm install fixed-sticky
使用
引入指令
在你的项目中导入 fixed-sticky：
import FixedSticky from 'fixed-sticky'; Vue.use(FixedSticky);
在标签中使用指令
在需要使用 fixed-sticky 的元素上加上 v-fixed-sticky 指令即可：
<div v-fixed-sticky></div>
默认情况下，fixed-sticky 会将元素设置为 position: sticky，并使用默认的值 top: 0。如果需要自定义 sticky 的位置，可以通过传递参数进行配置：
<div v-fixed-sticky="{ top: 50 }"></div>这里的 50 表示距离顶部的像素数。
动态切换定位方式
有时候我们需要在页面滚动到一定位置后，将元素的定位方式从 position: relative 切换为 position: fixed。fixed-sticky 也提供了很好的支持。
我们可以通过监听元素的 positionChange 事件来实现：
<div v-fixed-sticky @positionChange="handlePositionChange"></div>
在事件处理函数中，可以通过传递的参数 isFixed 来判断当前定位方式是否为 fixed：
methods: {
handlePositionChange(isFixed) {
console.log('isFixed:', isFixed);
}
}示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
----------
---- ------------------
---- --------------- ----------------- ---- -- ---
-------
------
---- ---------------------
---- ------------ ------------- ------ -- ----- --------------- ---- --------
------
------
-----------
--------
------ ----------- ---- ---------------
------ ------- -
----- -------
----------- ---
----------- -
------------
--
------ -
------ -
----- ---
--
--
--------- -
--------------------
--
-------- -
-------------- -
--- ---- - - -- - - ---- ---- -
-------------------- -------
-
--
----------------------------- -
----------------------- ---------
--
--
--
---------
------ -------
---------- -
------ ----
---------- -------
------- - -----
-
-------- -
------- -----
------------ -----
----------------- --------
----------- -------
-
------------- -
----------- ------
-
----- -
------- -----
------------ -----
-------------- --- ----- -----
-
--------总结
fixed-sticky 是一个很好用的指令，可以帮助我们轻松地实现元素在页面滚动过程中需要切换定位方式的效果。通过本文的学习，你应该已经了解了 fixed-sticky 的安装和使用方法，并学会了如何自定义 sticky 的位置以及动态切换定位方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34973