Bootstrap JavaScript插件:Affix插件 (affix.js)

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

Affix插件(affix.js)是一个很有用的插件,它可以让你的导航始终都固定在某个位置。一开始的时候,导航出现在页面的某个位置,当页面滚动一定距离时,无论页面如何滚动,它都固定在一个位置,就像被帖在页面上一样。

使用方法

1. 必须定义一个监听页面滚动的元素,它通常是 body 元素。需要给监听元素定义 data-spy="scroll" 属性来启动滚动监听功能,还要添加 data-target 属性来指定监听对象。

<body data-spy="scroll" data-target="#affixMenu">

2. 定义监听对象,它通常是导航菜单。需要给它定义 data-spy="affix" 属性来启动Affix功能。

<ul id="affixMenu" class="nav nav-list" data-spy="affix" data-offset-top="90">
      <li><a href="#overview"> Overview</a></li>
      <li><a href="#transitions"> Transitions</a></li>
      <li><a href="#modals"> Modal</a></li>
      <li><a href="#dropdowns"> Dropdown</a></li>
</ul>

3. 配置 offset 参数。offset 参数用来定义滚动距离,它是整数值,单位为 px,包括 data-offset-top 和 data-offset-bottom。如,data-offset-top="90" 表示滚动条从顶部向下滚动的距离大于 90px 时,监听对象将会固定不动。

offset 参数可以使用 data 属性设置,也可以使用JavaScript来设置。以下是用data 属性设置:

<ul id="affixMenu" class="nav nav-list" data-spy="affix" data-offset-top="90">

使用JavaScript设置的格式为:

$('#affixMenu').affix(offset)

参数 offset 的值可以是数值或对象。可以传递一个数值,它将同时作用于 data-offset-top 和 data-offset-bottom。也可以传递一个对象,为它们分别赋值。如下:

$('#affixMenu').affix({
   
   
    offset: {
   
   top: 90, bottom: 90}
});

就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
2天前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
7 1
|
5天前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
5 1
|
2天前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
4 0
|
3天前
|
监控 JavaScript 前端开发
JavaScript与Nest.js:打造高性能的服务器端应用
Nest.js是Node.js的渐进式框架,融合OOP、FP和FRP,提供模块化、装饰器和依赖注入,助建高性能服务器应用。选择Nest.js的原因包括模块化设计、简洁的装饰器API和高性能基础(如Express或Fastify)。开始使用需安装Node.js和`@nestjs/cli`,创建项目、编写控制器。深入学习涉及模块化、服务的依赖注入及中间件。安全性优化涵盖HTTPS、CORS策略、限流和性能监控。
|
5天前
|
前端开发 JavaScript API
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
|
5天前
|
监控 JavaScript 前端开发
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
13 0
|
5天前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
14 0
|
5天前
|
JavaScript 前端开发
js/javascript 操作对象【全】(含常用的操作对象的lodash)
js/javascript 操作对象【全】(含常用的操作对象的lodash)
5 0
|
5天前
|
存储 JavaScript 前端开发
js/javascript 操作数组【全】(含常用的操作数组的lodash)
js/javascript 操作数组【全】(含常用的操作数组的lodash)
4 0
|
6天前
|
JavaScript 前端开发
js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、相关插件等
js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、相关插件等
33 0