Question

它只是激活导航栏的最后一个按钮。

我尝试使用不同的值来进行数据偏移，但似乎无效。

    <body id="page-top" class="index">

    <nav id = "menu"class="navbar navbar-default navbar-fixed-top">
        <div class="container">
                <a class="navbar-brand" href="#page-top">Test site</a>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="#servers">section 1</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">section 2</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
<div data-spy="scroll" data-target="#menu" data-offset="0">
    <section id="servers">
....

    </section>

    <section id="about" class="success text-center about-section">
          ....
      </div>
      </section>

Jsfiddle：http://jsfiddle.net/hunterfps/h1akyg1m/2/

Answer 1

引用Bootstrap文档：

要轻松地将scrollspy行为添加到您的顶部栏导航，请将data-spy="scroll"添加到您要侦听的元素（最常见的是<body>）。然后使用任何Bootstrap .nav组件的父元素的ID或类添加data-target属性。

在您的示例中，您没有将scrollspy应用于正文，而是应用于div并且导航不在其中。如果您将scrollspy应用于body标记，则现在可以使用：

<body id="page-top" class="index" data-spy="scroll" data-target="#menu">
    <nav id = "menu"class="navbar navbar-default navbar-fixed-top">
        ...
    </nav>
    <section id="servers">
        ...
    </section>
    <section id="about" class="success text-center about-section">
        ...
    </section>
</body>

Scrollspy只是激活导航栏的最后一个按钮

1 个答案: