Twitter Bootstrap Scrollspy not working at all

Question

I have asked a previous question regarding Bootstrap ScrollSpy and this is my final attempt at trying to get this to work.

What I am trying to achieve is to change the colour of the navbar a tag when scrolling in that section. I have tried many ways and even have a Jsfiddle working but even that setup in my app does not work

This is what I have

JS

$('#spyOnThis').scrollspy();

Body

<body data-spy="scroll" data-target="#spyOnThis">

View

<div class="container">
 <div class="row show-grid clear-both">
  <div id="left-sidebar" class="span3 sidebar">
  <div class="side-nav sidebar-block">
    <h3 class="resultTitle fontSize13">Release Dates</h2>
    <ul class="date">
      <% @response.each_pair do |date, movie| %>
      <li><i class="icon-chevron-right"></i><%= link_to date_format(date), "#d_#{date}", :id=> '#d_#{date}' %></li>
    <% end %>
    </ul>
  </div>
</div>
<div class="span9">
  <div id="dateNav">
    <ul class="nav">
      <li><% @response.each_pair do |date, movie| %><%= link_to date_format(date), "#d_#{date}" %><% end %></li>
    </ul>
  </div>
  <div id="spyOnThis">
  <% @response.each_pair do |date, movie| %>
    <h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on&nbsp;<%= date_format(date) %></h3>
    <% movie.each do |m| %>
      <div class="thumbnail clearfix">
        <img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
        <div class="caption pull-right">
          <%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
          <p class="bio"><%= m.bio %></p>
          <p class="resultTitle">Cast</p>
          <p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
          <%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
        </div>
      </div>

    <% end %>
  <% end %>
  </div>
</div><!--span9-->
</div><!--Row-->
</div><!--/container-->

CSS

#dateNav{
position: fixed;
top: 0; left: 20px;
width: 100%;
background:none;
text-align:center;
}

#spyOnThis {
 height:100%;
 overflow:auto;
}

 .nav > li > a {
  display:block;
  }

.nav > li.active > a {
 display:block;
 color: red;
 text-decoration: underline;
 }

i know that height 100% may cause an issue but the height of my scroller will depend on the content and it can change.

I am now pulling my hair out, i have read that this scrollspy is quite buggy but surely it must work as the demo on their site does

EDIT

$('#dateNav').scrollspy();

<body data-spy="scroll" data-target="#dateNav">

HTML

ul class="nav">
 <li>
 <a href="#d_2013-01-09">9th Jan 2013</a>
 <a href="#d_2013-01-11">11th Jan 2013</a>
 <a href="#d_2013-01-18">18th Jan 2013</a>
 <a href="#d_2013-01-23">23rd Jan 2013</a>
 <a href="#d_2013-01-25">25th Jan 2013</a>
 <a href="#d_2013-01-30">30th Jan 2013</a>
 </li>

<div id="spyOnThis">
 <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-18" class="resultTitle fontSize13">Available on 18th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
 </div>

This turns all the links red so they are now all active?

also my body is 100% for sticky footer, not sure if that makes a difference Help really appreciated

Should `id="d_<%= date %>"` from your `H3` tags be moved to `<% movie.each do |m| %>` `
`. I'm new to ScrollSpy myself, but I believe you're missing an id for the "boxes". — Graham Walters, Jan 24 '13 at 21:39
i dont think so because the h3 starts each section on movies in my case, so i want the h3 to be the trigger — Richlewis, Jan 24 '13 at 21:42
Just verifying you have `dateNav` set in your body tag and not `navbar`. A copy of your output would be helpful as well. — Graham Walters, Jan 24 '13 at 21:57
i have made an update to my question, output? what would you like to see? — Richlewis, Jan 24 '13 at 22:00
Hello again! Just a suggestion: put **all** of your outputted HTML (with updates from the answers), relevant CSS, and the `.scrollspy()` line of JS into a jsFiddle - it will make it much easier for answerers to figure out what's wrong. — Sara, Jan 24 '13 at 22:51
Hello Sara (hangs head in shame :) ) yes fiddles seem the way to go, few basic errors by myself mind haven't helped the situation — Richlewis, Jan 25 '13 at 09:24

amarcy · Accepted Answer · 2013-01-24T22:36:41.643

You need to move the data-spy and data-target attributes from the body:

<body data-spy="scroll" data-target="#dateNav">

and move them to the div "spyOnThis":

<div id="spyOnThis">

Should be:

<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">

Per the documentation:

"To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component."

Based on your HTML you also need to fix a couple things:

Your list tags are not closed:

<ul class="nav">
    <li>
        <a href="#d_2013-01-09">9th Jan 2013</a>
        <a href="#d_2013-01-11">11th Jan 2013</a>
        <a href="#d_2013-01-18">18th Jan 2013</a>
        <a href="#d_2013-01-23">23rd Jan 2013</a>
        <a href="#d_2013-01-25">25th Jan 2013</a>
        <a href="#d_2013-01-30">30th Jan 2013</a>
    </li>
</ul>

Should be:

<ul class="nav dateNav">
    <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
    <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
    <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
    <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
    <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
    <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
</ul>

Your divs not properly closed either:

<div id="spyOnThis">
 <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-18" class="resultTitle fontSize13">Available on 18th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
     <div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
 </div>

Should be (just showing a couple of them):

<div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
</div>
<div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
</div>

Also it seems that the 100% height causes it to only highlight the bottom-most entry in the navbar list.

thank you for your answer, though now all dates are red so they are still all active? — Richlewis, Jan 24 '13 at 22:33
Check the formatting of the list tags. The way you have them in your HTML as
Here is a "working" JSFiddle, I used the CSS from your fiddle example and added your HTML into it so it is kind of a mash-up but gets the point across: http://jsfiddle.net/YqWQL/ If you set up the

score 2 · Answer 2 · answered Jan 24 '13 at 22:27

Alright, firstly your nav links should individually be wrapped in li tags i.e.

    <div id="dateNav">
      <ul class="nav">
        <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
        <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
        <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
        <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
        <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
        <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
      </ul>
    </div>

Secondly your <div id="spyOnThis"> div is missing a lot of closing div tags, so they're all nested instead of below each other. I simply removed your <div class="thumbnail clearfix"> divides to leave the following:

    <div id="spyOnThis">
      <h3 id="d_2013-01-09" class="box resultTitle fontSize13">Available on 9th Jan 2013</h3>
      <h3 id="d_2013-01-11" class="box resultTitle fontSize13">Available on 11th Jan 2013</h3>
      <h3 id="d_2013-01-18" class="box resultTitle fontSize13">Available on 18th Jan 2013</h3>
      <h3 id="d_2013-01-23" class="box resultTitle fontSize13">Available on 23rd Jan 2013</h3>
      <h3 id="d_2013-01-25" class="box resultTitle fontSize13">Available on 25th Jan 2013</h3>
    </div>

You can add the divides back in, but make sure you close them or the ScrollSpy won't be able to track it properly and will just break.

score 1 · Answer 3 · answered Sep 09 '14 at 17:00

If you dive into the code for this plugin its actually very imporant that you select the parent to the .nav

this.selector = (this.options.target
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
      || '') + ' .nav li > a'

Twitter Bootstrap Scrollspy not working at all

3 Answers3

Linked