CODEWITHSUNDEEP
javascripttwitter-bootstrap
Caio Tarifa
Caio Tarifa

Reputation: 6043

jQuery Bootstrap ScrollSpy doesn't work

I'm trying the ScrollSpy Bootstrap plugin, but it's not working properly. See the code below, it always highlight the last item.

http://jsfiddle.net/bRYMC/

<nav id="navbar">
  <ul class="nav">
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
    <li><a href="#page4">Page 4</a></li>
    <li><a href="#page5">Page 5</a></li>
  </ul>
</nav>

<div data-spy="scroll">
  <section id="page1" class="page">
    <h1>Page 1</h1>
  </section>

  <section id="page2" class="page">
    <h1>Page 2</h1>
  </section>

  <section id="page3" class="page">
    <h1>Page 3</h1>
  </section>

  <section id="page4" class="page">
    <h1>Page 4</h1>
  </section>

  <section id="page5" class="page">
    <h1>Page 5</h1>
  </section>
</div>

​Can you help me?

Upvotes: 6

Views: 2282

Answers (2)

Acu&#241;a
Acu&#241;a

Reputation: 285

Set data-target="#navbar" next to yourdata-spy="scroll" tag to see if that works.

Upvotes: 0

Syed Aslam
Syed Aslam

Reputation: 8807

Set the data-spy="scroll" on the body tag and it should work. Please check the updated jsFiddle.

Upvotes: 1

Related Questions