Affix Bootstrap Flickers After Affix-bottom Reached And Scrolling Back Top

i have a small one-page-layout site which uses the Affix-Plugin from Bootstrap to get the sidenav-fixed - the affix-top/affix-switch works fine as intended but if i reach affix-bot

Solution 1:

I think the flicker is due the absolute positioning that gets applied as you scroll. This can be resolved by adjusting the width when the affix is applied.

.on('affix.bs.affix', function () { // before affix
    $(this).css({'width': $(this).outerWidth()});  // variable widths
});

To prevent the nav from getting cut-off, add some additional CSS:

.sidebar.affix > .nav {
    position: relative;
    top: 0;
}
.sidebar.affix-bottom > .nav {
    position: relative;
    top: -100px;
}

Demo: http://codeply.com/go/AldWE19XrQ