Affix on a dynamic sidebar

Question

I have a Bootstrap layout with a right sidebar that accompanies the scroll, inside the div[role=main].

My layout:

My code:

<header class="container">
    <div class="row">
        <div class="col-sm-12">Header</div>
    </div>
</header>

<div role="main" class="container">
    <div class="row">
        <div class="col-sm-8 col-lg-9">
            Main Content
        </div>

        <aside class="col-sm-4 col-lg-3">
            <section class="budget-summary">
                <h2 class="text-center">Resumo</h2>                
            </section>
        </aside>
    </div>
</div>

<footer>
    <div class="row">
        <div class="col-sm-12">Footer</div>
    </div>
</footer>


$('.budget-summary').affix({
    offset: {
        top: 0,
        bottom: function () {
            return (this.bottom = $('footer#page-footer').outerHeight(true));
        }
    }
});

however the content of the sidebar is dynamic (grows and decreases). which sometimes causes the content of the sidebar not to be shown in full, as exemplified by the following figure:

there’s a way around this?

Answer 1

In your code you’re talking about when it rolls (top: 0) 0 pixels it will apply the fixed position. So in your CSS you have to define its position in the case:

.budget-summary {
    top: 0;
}

*the Off-set top you set in javascript is how much you should scroll to apply the position. Not the position after fixed.

I hope I’ve helped

Answer 2

You can set the div containing the . budget-Summary with the full page height and put an overflow=auto on it. Thus, when filling all available space at "height", a scroll bar will be displayed only for that div.