Bootstrap 滚动监听
滚动监听
Bootstrap滚动监听插件Scrollspy能够根据滚动的位置,自动更新导航条中相应的导航项。
滚动监听插件需要 bootstrap-scrollspy.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-scrollspy.js 文件。
使用方法
首先,定义导航条,并为导航链接指定目标锚点,如 href="#fat" 等。同时为导航条的外层包含框定义一个 id 值,如 id="navbarExample",以方便滚动监听控制。
<div id="navbarExample" class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
</ul>
</div>
</div>
然后,定义监听对象。这里设计一个包含框,其中包含多个子内容框。在子内容框中,为每个标题设计 id 值,如 id="fat" 等,它们分别与导航链接中的目标锚点相呼应。
<div>
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art ...</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache ...</p>
...
</div>
现在,拖动右侧区域的滚动条,当滚动区域到达 @mdo 时,导航条中的 @mdo 菜单项就会高亮显示,这是因为滚动监听插件能够监听滚动达到的位置,并自动为导航条的相应菜单项添加了一个 .active 类,让它高亮显示。效果如图 5‑4所示:
图5-4 Bootstrap滚动监听插件Scrollspy
如果导航中包含下拉菜单,并且滚动区域内容到达下拉菜单所对应的区域,除了子菜单高亮以外,子菜单的父元素也会高亮。子菜单会虽然高亮,但不会打开,因此需要手动打开下拉菜单,才能看到效果。效果如图 5‑5所示:
图5-5 Bootstrap滚动监听插件Scrollspy监听子菜
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap 滚动监听相关推荐
- Bootstrap 滚动监听插件Scrollspy 的事件
事件 Bootstrap滚动监听插件Scrollspy提供了一个事件 activate,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .active 类,让它高亮 ...
- Bootstrap 滚动监听插件Scrollspy 的选项
选项 Bootstrap滚动监听插件Scrollspy提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. 所有的选项 ...
- Bootstrap 滚动监听Scrollspy 调用方式
调用方式 1.data属性调用 只需给监听对象定义 data-spy="scroll" 属性及 data-target 属性,就可以激活滚动监听插件. data-target 属性 ...
- Bootstrap 滚动监听插件Scrollspy 的方法
方法 通过 JavaScript 调用滚动监控插件时,如果监听对象的DOM节点有增删元素的操作,则需要调用 .scrollspy('refresh') 方法来更新DOM. <script> ...
- 4.18、Bootstrap V4自学之路-----内容---滚动监听
为什么80%的码农都做不了架构师?>>> 总体来说,用起来不是特别满意,先放一放吧. 导航条示例 滚动监听插件会根据滚动的位置,自动更新导航条的目标.滚动在导航条下面的区域,查 ...
- bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名 描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
- Bootstrap学习(七)modal模态框、data属性、过渡事件、滚动监听事件
模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. <div class=" ...
- Bootstrap(滚动监听)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- bootstrap源码之滚动监听组件scrollspy.js详解
其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...
最新文章
- 如何使用Create-React-App和自定义服务人员构建PWA
- 特斯拉又被挖墙脚:Autopilot总监离职,加入苹果造车团队
- delphi中设置系统时间方法
- 【计算机视觉】深度相机(六)--Kinect v2.0 手势样本库制作
- numpy统计分布显示
- .net开发笔记(十三) Winform常用开发模式第一篇
- RTMP流媒体播放过程
- 通过Net Manager 配置Oracle 11g本地监听服务(listener service)
- 《PHP精粹:编写高效PHP代码》——2.7节设计数据库
- MFC通过窗口标题获得窗口句柄
- 应用多元统计分析高惠璇pdf_EViews统计分析与应用pdf txt mobi下载及读书笔记
- Python:计算机视觉实现视频的AI换脸(最基础)
- 豆瓣八卦小组html失败,原来豆瓣有这么多稀奇古怪的小组?
- MuseScore入门教程(二、添加基本音乐符号)
- java数组位置_java数组中如何查找元素的位置?
- python爬虫--小说爬取
- yyyy-MM-dd和YYYY-MM-dd格式化日期的区别你知道吗?
- 车企数字化转型中的核心技术应用
- git pull 技巧
- 创始人如何设置公司股权结构?