Reputation: 583
I've implemented scrollspy on our soon to launch homepage at: http://dev.indee.tv/
If you ignore the menu at the top and scroll a little further down, you'll see the familiar Bootstrap Navbar. The issue I'm having is that when you select a menu item, it goes to the correct ID, but it doesn't highlight the correct menu item it has landed on till I scroll down a few pixels.
Here's the Nav bar code:
<div class="nav navbar affix-top span12" data-spy="affix" data-offset-top="590">
<div class="navbar-inner">
<a class="brand" href="#">Indee</a>
<ul class="nav">
<li><a href="#whyindee" onclick=$.scrollTo(whyindee,1000);>ABOUT</a></li>
<li><a href="#howindee" onclick=$.scrollTo(howindee,1000);>USING IT</a></li>
<li><a href="#tryit" onclick=$.scrollTo(tryit,1000);>TRY IT</a></li>
<li><a href="#casestudy" onclick=$.scrollTo(casestudy,1000);>EXAMPLES</a></li>
<li><a href="#featureset" onclick=$.scrollTo(featureset,1000);>FEATURES</a></li>
</ul>
</div> <!-- navbar-inner-->
</div><!-- navbar -->
Can you help me understand what I'm doing wrong?
Thanks!
Upvotes: 2
Views: 1139
Reputation: 583
I figured it out. It turns out that scrollspy needs sections to be at least 500px in height. My top div was a little below 500px, so a min-height of 500px fixed the issue I was facing.
Upvotes: 1