Bootstrap fixed sidebar when scrolling - width

Hi all

I have a jsfiddle here - https://jsfiddle.net/gvqfhf3t/5/

The layout is a bit complicated but it’s whats needes on the actual page.

I want the side bar to be fixed so when the page scrolls it stays at the top of the page.

The sidebar stays at the top of the page but I also need it to stay the width of it’s container.

I’ve tried 100% and auto but they don’t work.

How can I fix the side bar when scrolling and keep it’s width 100% of it’s container.

1 Like

Check out Bootstrap affix http://getbootstrap.com/javascript/#affix

Also check this http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins/

2 Likes

I was hoping to do this without javascript

If you want to match the bootstrap column widths then you would need to set the same widths for the fixed element that bootstrap sets for that column in those various media queries.

e.g. for 768px min -width bootstrap has this size.

@media  (min-width: 768px) {
    .col-sm-4 {
        width: 33.33333333%;
    }
}

That means you would need to do this:

@media  (min-width: 768px) {
    .aside {
        border: 1px solid green;
        position: fixed;
        width: 33.3%;
        margin-left: -30px;
    }
}

You would need to do that for all the other media queries for that column style.

Remember fixed elements always relate to the viewport and not the element they reside in.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.