I have a site with the navbar fixed on top and 3 divs underneath in the main content area.
I'm trying to use scrollspy from the bootstrap framework.
I have it succesfully highlighting the different headings in the menu when you scroll past the divs.
I also have it so when you click the menu, it will scroll to the correct part of the page. However, the offset is incorrect (It's not taking into account the navbar, so I need to offset by about 40 pixels)
I see on the Bootstrap page it mentions an offset option but i'm not sure how to use it.
I'm also not what it means when it says you can use scrollspy with $('#navbar').scrollspy(), I'm not sure where to include it so I didn't and everything seems to be working (except the offset).
I thought the offset might be the data-offset='10' on the body tag, but it doesn't do anything for me.
I have a feeling that this is something really obvious and I'm just missing it. Any help?
My code is
...
<!-- 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>
This question is related to
twitter-bootstrap
Source: Stackoverflow.com