介绍
fixto 是一个基于 JavaScript 的轻量级库，能够使元素一直保持在视口内的指定位置。它可以用来实现固定在屏幕上方的导航栏、悬浮广告等常见的界面交互效果。
安装和使用
安装
要使用 fixto，首先需要安装它。你可以通过 npm 在命令行中进行安装：
npm install fixto --save
使用
使用 fixto 很简单。只需要在需要固定的元素上调用 fixto() 方法即可。下面是一个例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
----- ---------------- -----------------
-------
------
---- ------------------------
---- --------------------------
------- --------------------------------------------------------------------------
--------
----- ------ - ----------------------------------
---------------
---------
-------
-------在上面的代码中，我们先引入了 fixto 库，然后在导航栏元素上调用了 fixto() 方法。这样，导航栏就会固定在屏幕上方了。
如果你想要指定元素固定时的位置或者不让它超出一定高度时就不再固定，可以传入一些选项参数，例如：
navbar.fixto({
zIndex: 100,
marginTop: 20,
stopOnBottom: '#footer'
});这里给出了三个选项参数：
zIndex：指定元素固定后的 z-index 值。默认是999。marginTop：指定元素与屏幕顶部的距离。默认是0。stopOnBottom：当元素底部接触到某个元素时停止固定。可以是一个 DOM 元素、选择器字符串或者函数。默认是null，即不停止固定。
进阶应用
隐藏和显示
有时候我们需要在页面滚动到一定位置后才显示某个固定的元素，或者在滚动到底部之前隐藏它。这时候可以使用 visible 选项。
例如，下面的代码会使导航栏在距离页面顶部 200px 的位置之前一直是隐藏的，之后才出现：
navbar.fixto({
marginTop: 200,
visible: false
});
window.addEventListener('scroll', () => {
navbar.fixto('setVisible', window.scrollY >= 200);
});在上面的代码中，我们先通过 marginTop 选项指定了导航栏固定的位置。然后通过 visible 选项将它设置为初始状态下不可见。最后监听滚动事件，在滚动到指定位置后将其显示出来。
动态高度
有时候页面上的元素高度是动态变化的，此时我们需要在高度发生变化时重新计算它的位置。这可以通过调用 recalculate() 方法实现。
例如，下面的代码会在页面上所有类名为 box 的元素高度发生变化时重新计算它们的位置：
-- -------------------- ---- -------
----- ----- - ----------------------------------
----------------- -- -
-----------
------------- ---------
---
--- ----------------- -- -
-------------------------
----------------
---在上面的代码中，我们首先通过 `
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37745