Scrollspy ，可以监视元素的滚动 .. 滚动到特定位置的时候，就把对应的菜单项变成激活状态 ..

先添加一个布局 .. 一个 row .. 里面分成两栏 .. 一栏占用三个网格的宽度 .. 剩下的 9 个网格留给第二栏内容 ..

在这个 3 个网格的宽度的栏里面，添加一个导航 .. 一个 ul，上面加上 nav ，再用一个 nav-pills ..

里面是导航项目，一个 li 元素，上面加上 nav-item .. 项目里是个链接 .. 链接上要添加一个 nav-link .. 这个链接是 HTML .. 再复制两份 .. 修改一下链接文字 .. CSS ... JavaScript ...

再改一下这个导航的样式 .. 先用一个 flex-column ，让导航垂直显示 ..

再添加一个 position-fixed ，让它固定在原有的位置上 .. bg-light ，添加个浅色的背景 .. p-3 添加点内边距 .. text-right 文字右对齐 ..

内容

再去添加一些内容，放在第二栏里面 ..

内容有个标题 .. HTML ... 标题元素上要添加一个 id .. 这个是 html ... 然后添加一个段落文字 .. 里面随便放点内容... 再复制几份 ...

再去添加两块内容 ...

这块的标题是 CSS .. 对应的 id 也是 css ..

最后这个是 JavaScript .. 它的 id 同样是 javascript ...

链接

在导航的项目的链接里面，我们可以去链接下面这些内容块上的 id ... 这个是 #html .. 下面这个是 #css .. 最后这个让它指向 #javascript ..

预览

现在我们可以去试一下 ... 点一下导航上的项目 .. 会把我们带到页面对应的位置上 ..

Scrollspy

下面我们可以再用一下 scrollspy ，滚动页面的时候，自动切换导航项目的激活状态 .. 在页面的 body 元素上，可以添加一个 data-spy 设置成 scroll .. 再添加一个 data-target ，目标是 #nav-demo ..

然后在这个导航的包装上，再添加一个 id ，对应的值就是 nav-demo ..

预览

再去试一下 ...

滚动页面 ... 页面滚动到 html ，对应的 html 这个导航项目就是激活的状态 .. . 滚动到 css 的时候，对应的这个 css 项目就会是激活状态 ...