Affix in a dynamic sidebar [duplicate]

Question

Affix in a dynamic sidebar [duplicate]

Navigation

#1 by (0 votes)
#2 by (0 votes)

4

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

My layout:

Mycode:

<headerclass="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 contents of the sidebar is dynamic (grows and shrinks). which sometimes causes the contents of the sidebar not to be shown in full, as the following figure shows:

Is there a way around this?

javascript html css twitter-bootstrap

asked by anonymous 23.12.2014 / 20:01

2 answers

Gammu CMS Error 500: "unknown error" Import module from another folder

score 0 · Answer 1

In your code you are saying that when it rolls ( top: 0 ) 0 pixels it will apply the fixed position. So in your CSS you have to define the position of it in the case:

.budget-summary {
    top: 0;
}

* The off-set top that you set in javascript is how much to roll to apply the position. Not the position after fixed.

I hope I have helped

score 0 · Answer 2

You can set the div that contains the .budget-summary with the total height of the page and put an overflow = auto in it. So by filling in all the available space at "height", a scroll bar will be displayed only for that div.