Affixer 是一个基于 jQuery 的插件，它能够帮助我们在页面上固定一个元素。本文将介绍如何使用 Affixer，并提供一些示例代码。
安装
在项目根目录下执行以下命令来安装 Affixer：
--- ------- ------- ------
使用
1.引入 jQuery 和 Affixer：
------- ----------------------------------------------------------- ------- ---------------------------------------------------------------
2.创建一个需要被固定的元素，并在其中添加一个类名：
---- ---------------------------------------
3.使用 Affixer 创建固定元素：
------------------------- - ----------------------------- ---
注意：在使用 Affixer 时，需要确保被固定的元素有一个固定的大小和位置，否则会导致代码无效。
高级用法
在某些情况下，我们可能需要根据页面的高度来动态调整固定元素的位置。这时，我们可以使用 Affixer 提供的一些选项来实现这一需求。
offsetTop
offsetTop 选项表示固定元素距离页面顶部的距离。例如，如果你希望固定元素距离页面顶部的距离为 50 像素，则可以这样设置：
----------------------------- ---------- -- ---
offsetBottom
offsetBottom 选项表示固定元素距离页面底部的距离。例如，如果你希望固定元素距离页面底部的距离为 50 像素，则可以这样设置：
----------------------------- ------------- -- ---
parent
parent 选项表示固定元素的参照元素，即固定元素所在的容器。例如，如果你希望固定元素只在 #my-container 容器内固定，则可以这样设置：
----------------------------- ------- --------------- ---
示例
以下代码演示了如何创建一个固定元素，并根据页面高度来调整固定元素的位置：
--------- -----
------
------
-------------- ----------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------
-------
---- -
------- -------
-
---------------- -
----------------- -----
-------- -----
-
--------
-------
------
---- ---------------
---- ---------------------------------------
------
--------
------------------------- -
-----------------------------
---------- ---
------------- ---
------- ------------
---
---
---------
-------
-------在这个示例中，我们创建了一个容器元素 #container，在其中添加了一个需要被固定的元素，并设置了 offsetTop、offsetBottom、parent 选项，以实现固定元素的位置调整。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055e8081e8991b448dbdad