本文介绍如何使用 Bootstrap 3 的
ScrollSpy
和Affix
插件,构建一个具有顶部导航、巨幕信息区、左侧滚动固定导航和内容同步高亮的页面,并使用 JavaScript 方式代替传统的data-spy
属性完成初始化。
📌 背景与目标
在 Bootstrap 3 中,ScrollSpy
插件可根据页面滚动自动更新导航高亮,Affix
插件可实现元素滚动到特定位置后固定在页面上。这两个功能组合后,可以实现如下交互式页面结构:
- 顶部固定导航栏(navbar-fixed-top)
- 巨幕欢迎区(Jumbotron)
- 左侧导航与右侧内容共用一个 .container
- 左侧导航随着滚动固定在页面顶部
- 当前滚动位置自动在导航中高亮显示
✅ 技术选型
技术 | 用途 |
---|---|
Bootstrap 3 | UI 框架,提供 ScrollSpy 和 Affix 插件 |
jQuery | 事件监听、DOM 操作 |
ScrollSpy | 实现滚动监听和导航高亮切换 |
Affix | 实现滚动触发元素“吸顶”固定 |
🧱 页面结构说明
页面采用 Bootstrap 栅格布局,左侧为导航栏 col-sm-3
,右侧为内容区域 col-sm-9
,整体包含在 .container
内部。
1 | <div class="container"> |
✨ 效果展示图(逻辑结构)
1 | +-----------------------------+ |
🔧 核心代码实现
✅ HTML 结构(关键部分)
1 | <!-- 左侧导航 --> |
✅ JavaScript 初始化(无需 data-spy)
1 | <script> |
🎯 Affix 固定导航实现说明
核心点:
1 | <nav |
等同
1 | <script> |
属性 | 说明 |
---|---|
data-spy="affix" |
启用 Affix 插件 |
data-offset-top |
触发固定的页面纵向偏移量(以 px 为单位) |
data-offset-bottom |
在页面底部取消固定,避免覆盖页脚 |
.affix
样式定义:
1 | #sidebarNav.affix { |
Demo代码
1 |
|