Mam witrynę z paskiem nawigacyjnym na górze i trzema elementami div poniżej w głównym obszarze zawartości.
Próbuję użyć scrollspy z frameworka bootstrap.
Udało mi się podświetlić różne nagłówki w menu, gdy przewijasz elementy div.
Ja też to mam, więc po kliknięciu menu przewinie się do odpowiedniej części strony. Jednak przesunięcie jest nieprawidłowe (nie bierze pod uwagę paska nawigacyjnego, więc muszę przesunąć o około 40 pikseli)
Widzę na stronie Bootstrap, że wspomina o opcji przesunięcia, ale nie jestem pewien, jak jej użyć.
Nie jestem też tym, co to znaczy, gdy mówi, że możesz użyć scrollspy z $('#navbar').scrollspy(), nie jestem pewien, gdzie to uwzględnić, więc nie zrobiłem i wszystko wydaje się działać (z wyjątkiem przesunięcia).
Myślałem, że przesunięcie może być data-offset='10'na tagu body, ale nic to dla mnie nie robi.
Mam wrażenie, że jest to coś naprawdę oczywistego i po prostu mi tego brakuje. Jakaś pomoc?
Mój kod to
...
<!-- note: the data-offset doesn't do anything for me -->
<body data-spy="scroll" data-offset="20">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">VIPS</a>
<ul class="nav">
<li class="active">
<a href="#trafficContainer">Traffic</a>
</li>
<li class="">
<a href="#responseContainer">Response Times</a>
</li>
<li class="">
<a href="#cpuContainer">CPU</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div id="trafficContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="responseContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="cpuContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
</div>
...
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
</body>
</html>