CODEWITHSUNDEEP
jqueryhtmlcssruby-on-railstwitter-bootstrap
Liondancer
Liondancer

Reputation: 16469

Twitter Bootstrap Scrollspy not working while scrolling

I am testing out my scrollspy but I do not see it working. When I scroll, the pills do not get highlighted or "Selected". According to http://getbootstrap.com/javascript/#scrollspy, I have all the HTML bits required,

If I am missing anything or you would like more information, feel free to ask!

application.html:

<body data-spy="scroll" data-target="navbar navbar-default">
<%= yield %>
</body>

application.css

body {
    position: relative;
}

index.html

  <nav class="navbar navbar-default navbar-fixed-top">
    <ul id="nav_pills" class="nav nav-pills" role="tablist">
      <li role="presentation">
        <a href="#about">About</a>
      </li>
      <li role="presentation">
        <a href="#services">Services</a>
      </li>
      <li role="presentation">
        <a href="#portfolio">Portfolio</a>
      </li>
      <li role="presentation">
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>

Upvotes: 1

Views: 122

Answers (2)

DaniP
DaniP

Reputation: 38252

The problem here is the value you are using for data-target is invalid it needs the . if you reference a classname or the # if you reference an ID.

In thi case:

data-target="navbar navbar-default"

Just mention two classnames of the element but you need to identify that it's a classname in order to pass the right selector on the Jquery function. It must be:

data-target=".navbar.navbar-default"

Without spaces and with the . identifier like a normal Jquery selector. You can also simplify this to a single classname:

data-target=".navbar"

Check this BottplyDemo with the right code.

Upvotes: 3

Reagan Kirby
Reagan Kirby

Reputation: 111

I'm rather new to Bootstrap myself but it appears based on the documentation you still need to call the scrollspy with javascript. Unless you just left that part out of your example. 

$('body').scrollspy({ target: '.navbar-example' })

Upvotes: 1

Related Questions