CODEWITHSUNDEEP
jquerytwitter-bootstrapscroll
Noob
Noob

Reputation: 583

Bootstrap Scrollspy is highlighting the nav element just above the selected element

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

Answers (1)

Noob
Noob

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

Related Questions