3

Ok so hoping this is final question on Bootstrap Scrollspy, almost there, one more problem to fix i hope. As I have read having a body of 100% seems to disagree with scrollspy ( Im using sticky footer). The final element in my nav is highlighted no matter where i am on the page.

I have tried removing 100% body
I have tried removing the scrollspy js
I have tried setting the body as the target element
I have tried $('body').scrollspy();

None of these work. If i set the height though on the element I am spying on then it does work, though it seems to scroll past the target element quite a bit and then change. I would like to still be able to keep sticky footer.

Here is my code

View

<div class="container">
 <div class="row show-grid clear-both">
  <div id="left-sidebar" class="span3 sidebar">
    <div class="side-nav sidebar-block">
     <div id="dateNav">
      <h3 class="resultTitle fontSize13">Release Dates</h2>
       <ul class="nav 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>
<div class="span9">
  <div id="spyOnThis" data-spy="scroll" data-target="#dateNav">
   <% @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">
        <!--Image here
    <% end %>>
        <div class="caption pull-right">
          <!--Content Here
        </div>
      </div>
    <% end %>
  <% end %>
  </div>
</div><!--span9-->
</div><!--Row-->
</div><!--/container-->

JS

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

CSS

#dateNav{
position: fixed;
}

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

.side-nav .active a {
 color: #FFBE00;
}

HTML Output (Nav)

  <div id="left-sidebar" class="span3 sidebar">
   <div class="side-nav sidebar-block">
    <div id="dateNav">
     <h3 class="resultTitle fontSize13">Release Dates</h3>
     <ul class="nav date">
    <li><i class="icon-chevron-right"></i>
    <a id="#d_#{date}" href="#d_2013-01-09">9th Jan 2013</a>
    </li>
    <li><i class="icon-chevron-right"></i>
    <a id="#d_#{date}" href="#d_2013-01-11">11th Jan 2013</a>
  </li>
  <li class="active"><i class="icon-chevron-right"></i>
  <a id="#d_#{date}" href="#d_2013-01-30">30th Jan 2013</a>
  </li>
  </ul>
  </div>
 </div>
 </div>

Element being spied on

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

  <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
   <div class="thumbnail clearfix">
    <!--Image Here -->
    <div class="caption pull-right">
     <!--Paragraphs in here -->
    </div>
   </div>

    <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
     <div class="thumbnail clearfix">
    <!--Image Here -->
     <div class="caption pull-right">
    <!-Paragraphs here
     </div>
    </div>

     <div class="thumbnail clearfix">
      <!-- Image Here-->
      <div class="caption pull-right">
       <!-paragraphs here -->
      </div>
    </div>

     <div class="thumbnail clearfix">
      <!-- Image Here-->
      <div class="caption pull-right">
       <!-paragraphs here -->
      </div>
    </div>

     <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on next date</h3>
   <div class="thumbnail clearfix">
    <!--Image Here -->
    <div class="caption pull-right">
     <!--Paragraphs in here -->
    </div>
   </div>
   </div>
   </div>

Apologies for the amount of code but better to have more on there i guess

So does anyone know of a solution for this as scrollspy does seem quite buggy at the moment

Thanks

Richlewis
  • 13,978
  • 32
  • 103
  • 238
  • It might be worthwhile to put together a jsFiddle for this. That way people can have an example to reproduce your issue and quickly be able to edit the code to make it work. – Justin Helgerson Jan 25 '13 at 18:35

3 Answers3

4

You simply can't set 100% height on the element you're spying on with ScrollSpy, whether it be body or another div.
However, there is an issue on GitHub that suggests a workaround for this (also discussed here).

In your case, this would be:

$(window).scrollspy({wrap: $('#spyOnThis')[0]});


Here's a jsFiddle of your code that works with that fix. Note that I changed some of your HTML:

  • I removed the data-target and data-spy attributes again. When initiating ScrollSpy, use either the data attributes or the JavaScript.
  • I gave your span9 div the #spyOnThis ID, since the extra markup was unnecessary.

Hopefully this will resolve it once and for all.

EDIT

This solution worked; for @Richlewis' specific scenario we needed to add the parameter offset: -250 to ScrollSpy.

Sara
  • 8,064
  • 1
  • 32
  • 50
  • I bet your sick of the site of me asking this question, but its been so problematic, i do appreciate you help though – Richlewis Jan 25 '13 at 19:06
  • I like puzzles as much as the next programmer :) – Sara Jan 25 '13 at 19:17
  • I like puzzles aswell but this is ridiculous :) – Richlewis Jan 25 '13 at 19:18
  • again your fiddle is broken my end, as in there is no scroller, the links are all out of place, ive mimicked what you have done in the fiddle but nothing – Richlewis Jan 25 '13 at 19:21
  • Here's a [fiddle with more text](http://jsfiddle.net/MgcDU/1531/) so you can see the scrolling more easily. If you're still having trouble, size the "results" window down and it will scroll. – Sara Jan 25 '13 at 19:24
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23386/discussion-between-richlewis-and-sara) – Richlewis Jan 25 '13 at 19:26
  • Hi, dont suppose you fancy another puzzle? final stages i think http://stackoverflow.com/questions/14539094/fixed-navbar-for-scrollspy-within-responsive-bootstrap-layout – Richlewis Jan 26 '13 at 16:56
0

I just got scrollspy working on a site that I'm building. I was having the same issue where the last element was always highlighted. My problem was that I was calling .scrollspy() on the nav element when it should be on the body.

Try changing your script call to:

$('body').scrollspy();
Justin Helgerson
  • 22,372
  • 17
  • 88
  • 121
  • @Richlewis - I didn't see that in your question at the time. If you post a jsFiddle so that I can have the issue reproduced I'll take a look at it. – Justin Helgerson Jan 25 '13 at 18:40
  • my mistake i didnt indent my efforts correctly, so didnt show first time around, ill put one together in a bit, thank you – Richlewis Jan 25 '13 at 18:41
0

In case the other answers don't work for you, my problem ended up being a missing doctype on the top of the page.

Scrollspy calls $(window).height() in the formula to calculate the current scroll position. From this other question, you can see that this call will not work without a correct doctype.

As soon as I added <!DOCTYPE html> to the top of my HTML, Scrollspy started highlighting the correct links.

Community
  • 1
  • 1
David
  • 32,767
  • 3
  • 62
  • 78