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
