Bootstrap affix start in the middle of the page

I want multiple sections on my page with each a stacked navigation. The stacked navigation should stay in the section div. The first stacked navigation stay in the first section.

The second stacked navigation jumps to the bottom and back while scrolling. Can anyone explain me whats happening, and how i can fix this.

Demo: http://www.bootply.com/vAT4FJgSMS#

You can target all your affixable sidebars at once by giving them some identifying class and then applying affix for each element with the class:

<!-- language: lang-js -->

$('.sideNav').each(function() {
    $(this).affix({ /* options */ });
});

Then you just need to set the top and bottom for each section.

<!-- language: lang-js -->

$(this).affix({
    offset: {
        top: function(e) {
            var $curSection = $(e).closest('.row');
            return (this.top = $curSection.offset().top - 10);
        },
        bottom: function (e) {
            var $nextSection = $(e).closest('section').next('section');
            //if last element, go to bottom of page
            var bottom = ($nextSection.length === 0) ? 0 :
                         $(document).height() - $nextSection.offset().top;
            return (this.bottom = bottom);
        }
    }
});

affix-top and affix-bottom are applied when the element is no longer within the range of the top and bottom. You typically just want these elements to return to the normal flow, so you can set your css like this (or even ignore altogether as relative is the default position):

<!-- language: lang-css -->

.affix-top,
.affix-bottom {
    position: relative;
}

When the affix class is applied, you can style your list like this:

<!-- language: lang-css -->

.affix {
    position: fixed !important; 
    top: 10px; 
}

Working Demo in fiddle