Clever Geek Handbook

Bootstrap Scrollspy Selected Element

Ok, so hoping this is the last Bootstrap Scrollspy question, almost there, another problem that I'm hoping for. As I read, having a body of 100% doesn't seem to agree with the scrollspy (I'm using a sticky footer). The last item in my navbar gets 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 works. If I set the height, but on the element I was spying on, it works, although it seems like it scrolls a little past the target element and then resizes. I would still be able to keep the 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>

The item that 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>

Sorry for the amount of code, but better to have more in there I think

Does anyone know of this solution as scrollspy seems to be quite awkward at the moment

thank

+3


source to share


3 answers


You simply cannot set the height to 100% for the element you are watching with ScrollSpy, be it body

or the other div

.
However, there is an issue on GitHub that suggests a workaround for this (also discussed here ).

In your case, it would be:

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


Here's a jsFiddle of your code that works with this fix. Please note that I have changed some of your HTML:



  • I removed the attributes data-target

    and again data-spy

    . When running ScrollSpy, use either data attributes or JavaScript.
  • I gave the span9

    div an #spyOnThis

    ID tag as no additional markup is needed.

Hope this will solve it once and for all.

EDIT

This solution worked; for @Richlewis specific scenario, we needed to add a parameter offset: -250

to ScrollSpy.

+4


source


I just got scrollspy while working on a site I am building. I had the same problem where the last item was always highlighted. My problem was that I was calling .scrollspy()

to the nav element when it should be on the body.

Try changing your script call to:



$('body').scrollspy();
0


source


In case the other answers didn't work for you, my problem ended up with the doctype missing at the top of the page.

Scrollspy calls $(window).height()

in a formula to calculate the current scroll position. From this other question, you can see that this call will not work without the correct doctype.

As soon as I added <!DOCTYPE html>

to the beginning of my HTML code, Scrollspy started highlighting the correct links.

0


source






More articles:


All Articles