Bootstrap affix stops working after scrolling to the bottom of the page

Question

I have a long page with a 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 also have a footer with height:390px . When I first scroll the bottom of the page and scroll the sidebar, it returns to its first position (at the top of the page), and it is no longer with position:fixed . It has a built-in position:relative style added with Bootstrap JS. When I scroll up, I see a class changed to affix-top . At any other position on the scroll page, the affix class, even if it is at the bottom of the page and sidebar with position:relative . If I use only:

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

without bottom , it works fine, but I need bottom , due to footer .

Where could the problem be?

Answer 1

Since the docs suggest adding position: absolute to solve this problem, by .affix-bottom apparently, using position: absolute value of .affix-bottom .

So you need CSS:

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

Bootply