Affix插件的声明式属性和JavaScript方法

来源：互联网 2023-03-16 23:56:13 166

方法/步骤

在使用Affix插件之前需要导入affix.js或者Bootstrap.js核心包，我们同样可以使用data-*声明式属性或者JavaScript来触发Affix插件。声明式属性： data-spy：固定值affix表示元素固定不变。 data-offset-top：用来设置元素距顶部的距离。当浏览器滚动条向下滚动，且滚动距离大于这个值的时候，affix元素不再滚动，而是固定在浏览器顶部。 data-offset-bottom：和data-offset-top一样，只是滚动方向相反，固定在浏览器底部。 data-offset：表示top和bottom都为相同的数字。可以先定义一个导航，代码如下：

Affix插件的声明式属性和JavaScript方法

代码中定义了一个导航，使用的是垂直模式的导航，定义了data-spy="affix"和data-offset-top="200"，表示其距离浏览器窗口顶部200px。Affix附加导航同样提供了JavaScript触发方式以及data-*属性触发方式。在使用data-*属性触发时我们需要注意前面章节所讲到的两个属性，在导航中使用了data-spy="affix"以及data-offset-top="200"，代码如下：

Affix插件的声明式属性和JavaScript方法