Boostrap: .affix-bottom doesn't move to the bottom of its parent - css

Question

I am using Bootstrap's affix side-navigation. When you scroll down to the bottom of the element which the navigation refers to, the class .affix-bottom is applied to the navigation element and it should scroll (exactly in the way the side navigation in the Boostrap documentary works).
However, when the class changes to affix-bottom and the following styles are applied, the affix-navigation moves to the top of the page (and out of the viewport).
affix-bottom {
position: absolute;
top: auto;
bottom: 200px;
}
I am not sure wether the issue is related to Bootstrap. I have compared the styles Bootstrap natively uses and the styles I use and they are exactly the same.
This is the html I use:
<div class="row">
<div class="span3 bs-docs-sidebar" id="navfaq">
<ul class="nav nav-list bs-docs-sidenav affix-top">
<li class="">
<a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go to anchor1</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go to anchor2</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go to anchor3</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go to anchor4</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go to anchor5</a>
</li>
<li class="active">
<a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6">Go to anchor6</a>
</li>
<li>
<a>
<button class="btn pull-center">Contact</button>
<button class="btn pull-center">Call</button>
<p class="caption">on weekdays</p>
</a>
</li>
</ul>
</div>
<div class="span9">
...
</div>
As Bootstrap's Affix is having some issues, I wrote my own script which changes the classes of the affix from .affix-top to .affix when you scroll further than the top-position of the .row element and when you scroll to the bottom of the .row element, it will add the class .affix-bottom.
$(document).ready(function() {
$(window).scroll(function(){
if( $('.nav.nav-list.bs-docs-sidenav').height() >= (($('#anchor1').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40 ) ) ) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom');
}
else {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');
if( $(window).scrollTop() >= (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
}
else if( $(window).scrollTop() < (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
}
}
});
});
This keept my up all night and any help would be greatly appreciated.
Edit: Ok, I finally fixed it. However, it's more of a workaround. I changed the JS to the following:
$(document).ready(function() {
$(window).scroll(function(){
if( $('.nav.nav-list.bs-docs-sidenav').height() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40 ) ) ) {
$(".span3.bs-docs-sidebar").css({
'position': 'relative',
'height': $('.row .span9').height()
});
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom');
}
else {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');
if( $(window).scrollTop() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
}
else if( $(window).scrollTop() < (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
}
}
});
});
I have no idea why it's working in Bootstrap without the position:relativ and the equivalent height for the span3.

Answer 1

try this
just add class affix to div
<div class="span3 bs-docs-sidebar affix affix-top" id="navfaq">
<ul class="nav nav-list bs-docs-sidenav ">
<li class=""><a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go
to anchor1</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go
to anchor2</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go
to anchor3</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go
to anchor4</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go
to anchor5</a> </li>
<li class="active"><a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6">
Go to anchor6</a> </li>
<li><a>
<button class="btn pull-center">
Contact</button>
<button class="btn pull-center">
Call</button>
<p class="caption">
on weekdays</p>
</a></li>
</ul>
</div>