Question

我正在尝试使用与scrollspy一起使用的链接来实现固定在顶部的顶部导航栏。我的实现似乎没有按预期工作。

链接似乎有效并转到正确的部分但链接的突出显示在滚动时永远不会改变。＆＃34; MDO＆＃34;总是被选中。

<html>
    <head>
       <script src="bower_components/jquery/dist/jquery.min.js"></script>
      <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<style>
    .section {
        height: 100%;
        padding-top: 51px;
    }
</style>
</head>

<body data-spy="scroll" data-target="#navbar-example2" style="position: relative;">

<nav id="navbar-example2" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#fat">@fat</a></li>
            <li class=""><a href="#mdo">@mdo</a></li>
        </ul>
    </div>
</nav>

<div id="fat" class="section">
    <h4 >@fat</h4>
    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</div>
<div id="mdo" class="section">
    <h4 id="mdo">@mdo</h4>
    <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
</div>

</body>

 </html>

Answer 1

我遇到了这个问题，只是让它在我的页面上工作。请查看http://intern-dev.obrary.com/manufacturer。

要通过js执行此操作，您需要三件事：

1 - 标记你的＆lt;身体＆gt;适当的部分。尝试添加一个类。

<body class="scroll-area" data-spy="scroll">

2 - 正确标记导航栏。你的看起来不错。

3 - 将js添加到头部。我在你的例子中没有看到这一点。试试

<script>$(document).ready(function(){
$(".scroll-area").scrollspy({target: "#navbar-example2"}) 
});</script>

Bootstrap固定导航栏使用scrollspy

1 个答案: