"Floating" sidebar inside an element when scrolling

Question

I have a layout Bootstrap with a right sidebar and I need this "turn" (up/down) when doing scroll, but not above the header and footer. just "float" 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>

EDIT:

I managed to run the bar with the affix plugin of bootstrap:

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

but now a problem has arisen. 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

You will need to use Javascript to read the scroll and change the position of this sidebar.

A suggestion (using jQuery because I assume that using Bootstrap has jQuery) is:

var main = $('div[role=main]').outerHeight();
var posicaoFooter = $('footer').offset().top;
var sidebarDiv = $('aside');

$(window).on('scroll', function () {
    var scroll = $(this).scrollTop();
    if (scroll + sidebarDiv.outerHeight() < main) sidebarDiv.css('margin-top', scroll);
});

Example: http://jsfiddle.net/s8h9eeL0/

In this code when the scroll happens it will compare the scroll value + the height of the sidebar and will change the position while that value together is less than the total height of the main. You may need CSS adjustments but I think this is the idea you need and you can see in the example how it works.

Answer 2

One of the features of Bootstrap does just what you want, the affix. the only requirement is to add a style position: absolute to the element you want to fix and run a JS code to initialize the behavior.

http://jsfiddle.net/mryvo4tL/1/embedded/result/