Bootstrap scrollspy and sticky navigation not working together

Question

Having a bit of a problem here mixing two elements!

I'm sure you have seen the technique before. A sticky navbar that lives beneath the feature area which then sticks to the top of the page when the user scrolls down. As the user scrolls down the page the nav bar lights up the appropriate section and the user can jump around sections using the navbar too..

Testing site is here:

http://www.domaincreative.co.uk/dev/midasflo-test2

The scrollspy bootstrap element appears to work well on scrolling. However once you click an area the problems occur. Often it goes to the wrong section or highlights the wrong area in the nav but in the right section.

Does anybody know what can be done to fix this? My guess is that the sticky navigation is causing an issue perhaps with the height? Making it seem shorter than it is when the nav is sticking?

Essentially it works until the sticky navigation comes into effect, what is the solution to get them to both to work together?

Jolly

Answer 1

A link that helped me work through some issues:

http://mtjhax.wordpress.com/2013/02/11/twitter-bootstraps-scrollspy-plugin-needs-better-docs/

Also important:

Set up Affix

Give the nav element a data-spy="affix", data-offset-top="", data-offset-bottom="" where offset from top or bottom tells the browser when to switch the positioning of the nav element. (Note: affix-top is usually position: static, affix is usually position: fixed, and affix-bottom is usually position: absolute.)

Get the positioning right

Make sure to set in your css a "position: _____;" and "top: __px" for each of these states. (Possibly, you only need to set a top for .affix, position & bottom for .affix-bottom, and nothing for .affix-top.)

Solve flickering issues

If you've had issues with flickering of the nav element when you've scrolled to the bototm (class switches rapidly between .affix and .affix-bottom), then you probably need to set position:relative on a parent element. I would recommend on a parent that takes up the full height that your nav will "travel", that way you can set bottom: 0 or bottom: [desired margin from bottom] for the .affix-bottom.

Initiate ScrollSpy with JS

You've initiated the affix portion of your page. Now lets initiate the spyscroll. Note that you can initiate spyscroll through data attributes or through js. Let's do js.

In the link above, just copying the code is dangerous because the "#" comment syntax broke my code (Switched # to // and all worked well).

Add this to the bottom of your body:

<script>
   // initiates scrollspy on body targeting the nav wrapper
   jQuery('body').scrollspy({ target: '#nav-wrapper' });
</script>

Note the use of body instead of the nav element like in the doc. Super important. Note that I am targeting the nav wrapper not the nav itself (if targeting the nav itself, the spying won't work, and instead the bottom li in the nav will always be highlighted)

Done

This was all a nightmare to discover, so hopefully it helps someone.

EDIT: My example. Note that the wrapper maintains its width so then the fixed navigation is not overlapping other content. (I had to give the nav itself a width so it didn't change sizes when jumping out of the nav wrapper).

<ul class="nav nav-list affix" data-spy="affix" data-offset-top="585" data-offset-bottom="425" id="prepare-navigation">
  <li class="nav-header">Where?</li>
  <li class="divider"></li>
  <li><a href="#at-the-museum-day-time">When?</a></li>
  <li class="divider"></li>
  <li><a href="#at-the-museum-overnight">Why?</a></li>
  <li class="divider"></li>
  <li><a href="#around-the-region">How?</a></li>
  <li class="divider"></li>
  <li><a href="#at-your-school-location">Etc?</a></li>
  <li class="divider"></li>
</ul>

Decency

The only issue that I can't seem to lockdown is that flickering issue. I tried your solution, which is to set the parent of the full row to position: relative;. That still doesn't working. Here is my working example: jsfiddle.net/nguyenj/d4PEN. The .affix class and .affix-bottom class switches back and forth so rapidly. – Demilune

Note: The affixed navigation is going to jump out of its wrapper. So make sure the navigation itself has all the qualities you want it to (ie width and background treatment). I would make sure that A) your navigation, AND your wrapper has width properties (ie class of span3 on wrapper, and given width for nav) and B) style properties (ie class of well) are part of the navigation and it's children, and not the wrapper. I've now included my example in my answer above. I'll address your flickr question as soon as I get the chance. – Decency

Hey, I just started using a different plugin: sticky-nav. Here's the example of it in action: example. It has been working for me. – Demilune

Answer 2

Good answer and post which helped me. Couple things to add as I just worked through this one on Bootstrap 3.

1. If you don't include the doctype, you won't get correct behavior. It's essential best practice anyway, but I was overlooking it in my scratch project and I was seeing the "bottom li in the nav will always be highlighted" affect.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

2. Some good tutorials to supplement documentation.

http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins http://www.codingeverything.com/2014/02/BootstrapDocsSideBar.html

Favrot