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: 后续继续更新!!

目录
相关文章
|
4天前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
2天前
|
资源调度 前端开发 JavaScript
Bootstrap日期选择器插件bootstrap-datepicker
Bootstrap日期选择器插件bootstrap-datepicker
27 12
|
13天前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
41 16
|
9天前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
28天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
6天前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
15 1
|
7天前
|
前端开发 JavaScript
bootstrap右键菜单插件
这是一款基于bootstrap的jquery右键菜单插件。该bootstrap右键菜单使用Bootstrap dropdown组件来制作,并通过tether插件进行定位,具有多级菜单,灵活,响应式等特点
|
23天前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
25 6
|
27天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
33 5
|
24天前
|
Web App开发 JavaScript 前端开发
高性能的纯Js滚动条美化插件smooth-scrollbar
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。