Twitter Bootstrap Affix - how to stick to bottom?

Question

I've read the documentation, and I feel like I'm doing exactly what they show in their examples. Yet when I try it, I can't get this to work. I'd like it to work in a way similar to the docs. It becomes position:fixed after scrolling past the header, and then once it touches the footer it becomes position:absolute and sticks to the bottom.

---

DEMO: http://jsfiddle.net/uvnGP/1/

JS

$("#account-overview-container").affix({
    offset: {
        top: $("header").outerHeight(true),
        bottom: $("footer").outerHeight(true)
    }
});

SASS

#account-overview-container {
    &.affix{
        top:10px;
        bottom:auto;
    }

    &.affix-top{
        //Do I need this?
    }

    &.affix-bottom{
        position:absolute;
        top:auto;
        bottom:140px;
    }
}

Answer 1

There some changes from your code but the solution fits for variable header and footer height, responsive width and can be change for fixed header.

Here is the link

http://jsfiddle.net/uvnGP/131/

The problem was, when the affix hit the bottom, there was a top and a bottom css style added to your container (#sidebar), the way to fix it is to reset that bottom style to auto, that way only the top style will acto on your container

here is the code:

var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').innerHeight();
$('#account-overview-container').affix({
    offset: {
        top: headerHeight,
        bottom: footerHeight
    }
}).on('affix.bs.affix', function () { // before affix
    $(this).css({
        /*'top': headerHeight,*/    // for fixed height
            'width': $(this).outerWidth()  // variable widths
    });
}).on('affix-bottom.bs.affix', function () { // before affix-bottom
    $(this).css('bottom', 'auto'); // THIS is what makes the jumping
});