Bootstrap scrollspy不起作用

Question

我试图在我正在处理的网站上实施Bootstrap Scrollspy，但不管我做什么，我似乎无法让它工作（或者做任何事情< / em>就此而言）。

可以在http://thecreativecompany.stage.webcomm.com.au/

查看该网站

这是我的JavaScript：

$(document).ready(function () {
    var offset_height = $("nav").height();

    $('#nav-wrapper').height(offset_height);

    $("nav").affix({
        offset: $("nav").position()
    });

    $('body').scrollspy({
        target: '#nav-menu',
        offset: offset_height
    });

    $('#menu li a').click(function (event) {
        var scrollPos = $('body').find($(this).attr('href')).offset().top - (offset_height - 1);

        $('body,html').animate({
            scrollTop: scrollPos
        }, 500);

        return false;
    });
});

Answer 1

我相信你错过了菜单中的.nav课程。来自文档：

  

然后使用父级的ID或类添加data-target属性   任何Bootstrap .nav 组件的元素。

只需将课程添加到菜单<ul>：

即可

<div id="nav-menu">
    <ul id="menu" class="nav">
        <li><a href="#header">Home</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>

此外，您将从scrollspy插件获得的结果是.active类被添加到您的列表项中，所以我假设您要将这样的规则添加到您的CSS中选择你当前的风格：

#menu li.active:after {
    height: 6px;
}