Bootstrap Affix

Question

I'm trying to use Twitter Bootstrap's new affix option, but I can't quite get it right.

I have put together an example at http://jsfiddle.net/yPgUu/1/ and the relevant part is

<ul class="nav nav-list" data-spy="affix">

The left nav starts off at the correct position. However, as you scroll down, then there is a gap at the top of the nav. I'd like the nav to always be at the top of the current view, instead of being a gap.

I've also tried playing around with data-offset-top="200" , but that just seem to makes the menu bounce around.

What am I missing?

Answer 1

OK, so this needs to be done in two parts.

http://jsfiddle.net/yPgUu/2/

First, assign data-offset-top="50" and then modify the affix property in css

.affix {
    top: 10px;
}​