Home/ Questions/Q 8375785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:15:55+00:00

I have a site with the navbar fixed on top and 3 divs underneath

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Bootstrap uses offset to resolve spying only, not scrolling. This means that scrolling to the proper place is up to you.

    Try this, it works for me: add an event handler for the navigation clicks.

    var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

    I found it here: https://github.com/twitter/bootstrap/issues/3316

    • 0