Bootstrap исправил navbar с прокруткой

Я пытаюсь реализовать верхнюю панель навигации, которая фиксируется наверху со ссылками, которые работают с прокруткой. Моя реализация не работает должным образом.

Похоже, что ссылки работают и переходят в соответствующий раздел, но выделение ссылок никогда не меняется при прокрутке. "mdo" всегда выбрано.

<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>
Источник

1 ответ

У меня были проблемы с этим, и я просто заработал на своей странице. Проверьте это на http://intern-dev.obrary.com/manufacturer.

Чтобы сделать это через JS, вам нужно три вещи:

1 - пометить ваш раздел соответствующим образом. Попробуйте добавить класс.

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

2 - пометить ваш navbar соответствующим образом. Ваш выглядит хорошо.

3 - добавить JS к голове. Я не вижу этого в вашем примере. Пытаться

<script>$(document).ready(function(){
$(".scroll-area").scrollspy({target: "#navbar-example2"}) 
});</script>
Источник
Другие вопросы по тегам