Bootstrap Affix Classes Jumping at Bottom

affix, css, jquery, scrollspy, twitter-bootstrap

Solution

The inline position relative conflicts with the `.affix` state.

This fixed my problem where the affixed element jumped back to the top because of the inline style position relative:

.affix-bottom {
    position: relative
}

Problem

I've managed to get the scrollspy and affix plugins to work just fine, but whenever the user scrolls to the bottom of the page (if using a small browser window) the affix classes start conflicting with another, and the affix jumps between states. An example can be seen here: http://devng.sdss.org/results-science/ The CSS is: ``` .affix-top,.affix{ position: static; } #sidebar li.active { border:0 #eee solid; border-right-width:5px; } @media (min-width: 979px) { #sidebar.affix-top { position: static; margin-top:30px; } #sidebar.affix { position: fixed; top:70px; } #sidebar.affix-bottom { position: fixed; bottom: 400px; } } ``` And JS: ``` $('#leftCol').affix({ offset: { top: 235 ,bottom: 400 } }); /* activate scrollspy menu */ var $body = $(document.body); var navHeight = $('.navbar').outerHeight(true) + 10; $body.scrollspy({ target: '#leftCol', offset: navHeight }); ``` I think the answer is right in front of my face but I've been staring at this too long, and any extra set of eyes would be most appreciated.

Original source