Did you ever figure this out? It's driving me mad. I cannot for the life of me find the solution.
On Monday, March 5, 2012 5:38:27 AM UTC, Victor Hooi wrote: > > Hi, > > I'm trying to use Bootstrap's Scrollspy > > My <body> tag: > > <body data-spy="scroll" data-target=".subnav" data-offset="50"> > > > My subnav: > > <header class="jumbotron subhead" id="overview"> >> <h1>Lorem Ipsum</h1> >> <p class="lead">Lorem ipsum dolor sic amet.</p> >> <div class="subnav"> >> <ul class="nav nav-pills"> >> <li><a href="#2012">2012</a></li> >> <li><a href="#2011">2011</a></li> >> <li><a href="#2010">2010</a></li> >> <li><a href="#2009">2009</a></li> >> <li><a href="#2008">2008</a></li> >> </ul> >> </div> >> </header> > > > I also took the subnav section CSS from Bootstrap's docs.css > > My headings with anchors: > > <h1 class="year-heading" id="2012">2012</h1> > > > The problem is the scrollspy anchor seems to be 30 pixels or so below the > actual element. So for example, when I scroll through, the ScrollSpy will > only update when I'm already below the heading and the heading is off the > screen. > > Likewise when I try to use the Scrollspy links, it will take me to just > below the heading (as in, the heading is already off the screen at the top). > > However, if I use <section> instead of <h1> as the target, it seems to > work fine? > > <section id="2011"> > > > Any idea why this is? > > Cheers, > Victor >
