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][multiple affix]:




    $('.sideNav').each(function() {
        $(this).affix({ /* options */ });
    });

Then you just need to set the top and bottom for each section. 



    $(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):



    .affix-top,
    .affix-bottom {
        position: relative;
    }

When the affix class is applied, you can style your list like this:



    .affix {
        position: fixed !important; 
        top: 10px; 
    }

## [Working Demo in fiddle][fiddle]


[fiddle]: http://jsfiddle.net/KyleMit/Dd7Hq/
[multiple affix]: https://stackoverflow.com/q/18021550/1366033

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#
