Here's an excerpt from the Bootstrap docs..
Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
So in your case once the .affix kicks on the span4
that contains your sidebar is removed from the usual flow of the DOM.
One way to fix this is to make the `UL the affix element..
<ul class="nav nav-list" data-spy="affix" data-offset-top="100">
http://jsfiddle.net/skelly/GUbgF/2/
You may also have to use a @media query to handle the case when the browser is resized to a smaller width.