Bootstrap导航条如何跟踪锚点

发表于 2020-05-14 | 分类于前端框架， Bootstrap | | 浏览次

字数统计: 153 | 阅读时长 ≈ 1

通过 data 属性向想要监听的元素（通常是 body）添加 data-spy="scroll"，然后添加带有 Bootstrap 标签为 nav 或者 class="nav" 或 id="nav" 组件的父元素的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配所要监听链接的 ID 的元素存在。

来看例子：

<body data-spy="scroll" data-target=".navbar-menu">
    <!-- 导航条 -->
    <a id="home" class="target-fix"></a>
    <nav class="navbar navbar-default navbar-fixed-top navbar-menu">
        .....
    </nav>
    .....

    <script>
    $('body').scrollspy({ target: '.navbar-menu' });
    </script>
</body>