Affixer 是一个基于 jQuery 的插件，它能够帮助我们在页面上固定一个元素。本文将介绍如何使用 Affixer，并提供一些示例代码。
安装
在项目根目录下执行以下命令来安装 Affixer：
npm install affixer --save
使用
1.引入 jQuery 和 Affixer：
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="node_modules/affixer/dist/jquery.affixer.min.js"></script>
2.创建一个需要被固定的元素，并在其中添加一个类名：
<div class="affixed-element">这个元素将被固定。</div>
3.使用 Affixer 创建固定元素：
$(window).load(function() {
$('.affixed-element').affix()
});注意：在使用 Affixer 时，需要确保被固定的元素有一个固定的大小和位置，否则会导致代码无效。
高级用法
在某些情况下，我们可能需要根据页面的高度来动态调整固定元素的位置。这时，我们可以使用 Affixer 提供的一些选项来实现这一需求。
offsetTop
offsetTop 选项表示固定元素距离页面顶部的距离。例如，如果你希望固定元素距离页面顶部的距离为 50 像素，则可以这样设置：
$('.affixed-element').affix({
offsetTop: 50
});offsetBottom
offsetBottom 选项表示固定元素距离页面底部的距离。例如，如果你希望固定元素距离页面底部的距离为 50 像素，则可以这样设置：
$('.affixed-element').affix({
offsetBottom: 50
});parent
parent 选项表示固定元素的参照元素，即固定元素所在的容器。例如，如果你希望固定元素只在 #my-container 容器内固定，则可以这样设置：
$('.affixed-element').affix({
parent: '#my-container'
});示例
以下代码演示了如何创建一个固定元素，并根据页面高度来调整固定元素的位置：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ----------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------
-------
---- -
------- -------
-
---------------- -
----------------- -----
-------- -----
-
--------
-------
------
---- ---------------
---- ---------------------------------------
------
--------
------------------------- -
-----------------------------
---------- ---
------------- ---
------- ------------
---
---
---------
-------
-------在这个示例中，我们创建了一个容器元素 #container，在其中添加了一个需要被固定的元素，并设置了 offsetTop、offsetBottom、parent 选项，以实现固定元素的位置调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e8081e8991b448dbdad