Tenho um site com a barra de navegação fixada na parte superior e 3 divs na parte inferior da área de conteúdo principal.
Estou tentando usar scrollspy da estrutura de bootstrap.
Eu tenho sucesso destacando os diferentes títulos no menu quando você rola para além dos divs.
Também o tenho para que, quando você clicar no menu, ele role para a parte correta da página. No entanto, o deslocamento está incorreto (não leva em consideração a barra de navegação, então preciso deslocar em cerca de 40 pixels)
Vejo na página Bootstrap que menciona uma opção de deslocamento, mas não tenho certeza de como usá-lo.
Também não sou o que significa quando diz que você pode usar scrollspy com $('#navbar').scrollspy()
, não tenho certeza de onde incluí-lo, então não o fiz e tudo parece estar funcionando (exceto o deslocamento).
Achei que o deslocamento poderia ser data-offset='10'
na etiqueta do corpo, mas isso não faz nada para mim.
Tenho a sensação de que isso é algo realmente óbvio e estou simplesmente perdendo isso. Qualquer ajuda?
Meu código é
...
<!-- 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>