导航栏还有几个位置选项，我们再试一下 ..

先在这个 component demo 元素上添加一个 style 属性，把 height 设置成 300vh ..

现在我们看到的是导航栏的默认的位置 .. 滚动页面的时候 .. 导航栏也会随着滚动 ..

找到导航栏的包装元素 .. 如果我们想让导航栏一直固定在页面的顶部 .. 可以在这里添加一个 fixed-top ...

滚动页面 .. 导航栏会一直在页面的顶部显示 ..

把它固定在页面底部 .. 可以用一下 fixed-bottom

现在不管我们怎么滚动页面 .. 这个导航栏都会在页面的底部显示 ..

还有一个 sticky-top .. 我们再试一下 .. 这个类里的样式就是把元素的 position 属性的值设置成了 sticky .. 在有些浏览器上不支持使用 postion: sticky ..

默认导航仍然会显示在它原来的位置 ..

滚动页面 .. 导航栏也会随着动 .. 直到它遇见页面顶部 .. 现在它会就一直固定在这里了 ...