Bootstrap sticky footer + sticky bar on top

[TSmarion]

I have a sticky footer and I'm using this setup (Using LESS variables):\[code\]<style> html,body {height: 100%;} .outer {height:auto!important;min-height: 100%;margin-bottom: -1 * (@footerHeight);} footer, .push {height: @footerHeight)}</style><div class="outer"> Content here<div class="push"></div></outer><footer> Footer here</footer>\[/code\]This works great. Now I'm adding an always-visible bar on the bottom of the browser, and when scrolling down, it should rest ON TOP of the existing footer. (Actually, I split the content of the footer in a part that should be always visible, and a part that's only visible when scrolled down). This works like this:\[code\]<style> .visibar { z-index: 1000; &.affix-bottom { position: absolute; bottom: @footerHeight; } &.affix { bottom: 0px; position: fixed; } }</style>\[/code\]And the JavaScript:\[code\]$('.visibar').affix({ offset: {bottom: footerHeight }})\[/code\]As you can see, I'm addressing the bottom distance on two places, because it won't work if I don't. On most pages, the setup works OK, but on some pages, with less content, the footer is totally visible, and the .visibar is not on top of the footer, but on the bottom of the screen, over the footer. FireBug indeed shows that the class is .affix, not affix-bottom. How can I fix that?I tried to make a fiddle of it, see http://jsfiddle.net/mGy2u/37/ , but now the whole bottom-sticking thing won't work.