Bootstrap affix stop working after scroll to bottom of the page

Question

I have long page with fixed left sidebar :

<div id="sidebar">
    <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
        <li>menu 4</li>
        <li>menu 5</li>
        <li>menu 6</li>
        <li>menu 7</li>
    </ul>
</div>

and js for affix:

$("#sidebar").affix({offset: {top: 0, bottom:420} });

I have and footer which is with height:390px. When I first time scroll to the bottom of the page and try to scroll up the sidebar returns to its first position (to the top of the page) and it is not with position:fixed, anymore. It is with inline style position:relative, added with Bootstrap JS. When I scroll to the top I see class changed to affix-top. Every other scroll page position, the class is affix, even if it is of the bottom of the page and sidebar stay with position:relative. If I use only :

$("#sidebar").affix({offset: {top: 0} });

, without bottom, it works fine, but I need bottom, because of the footer.

Where can be the problem ?

Answer 1

As the docs suggest adding position: absolute to the .affix-bottom appears to solve this problem.

So you need the css:

#sidebar.affix-bottom {
  position: absolute;
}

Bootply