Question

我正在尝试将一个scrollspy添加到我正在处理的小型个人网站上。到目前为止，我有以下内容：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#home">Jon Snow</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <div id="my-nav">
        <ul id="top-menu" class="nav navbar-nav navbar-right">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#work">Portfolio</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        </div>
    </div>
    </div>
</nav>

我尝试添加一个id并使用这样的jQuery脚本：

<script>
$('body').scrollspy({ target: '#my-nav' });
</script>

但没有运气。有什么想法吗？

Answer 1

最简单的方法如下例所示： http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

<body data-spy="scroll" data-target=".navbar">

Answer 2

您需要像这样定位导航菜单：

<body data-spy="scroll" data-target="#my-nav">

更多http://getbootstrap.com/javascript/#scrollspy。

如何在我的bootstrap导航栏中正确添加scrollspy？

2 个答案: