ansaurus

Question

CSS or JQuery Fixed sidebar in website layout

Answer 1

+2 A:

Try having your content div scroll with the content instead of expanding height wise and causing scroll bars for the whole page. That way your layout will stay the same no matter how big the content is, and the content section will get scroll bars

#content {
   overflow:auto;
}

That should work for ya.

Zoidberg 2009-08-21 18:05:12

That is an option I didn't consider, i'd prefer for the scroll bar to be at the edge of the page like normal but this is always a possible fallback in worst case senario

Chris Marisic 2009-08-21 18:38:15

You could always play around with the content area a bit. Have a div inside the content that restricts the width. Then have the scrolling content div extend to the edge of the page, then absolutely position your side bar over the blank area you have reserved in the scrolling box by restricting the content width. Then your sidebar can appear beside the content, but on the correct side of the scrollbar.

Zoidberg 2009-08-21 18:40:52

The content and my site is all a fixed width layout using blueprint, your idea sounds very viable if no one else offers anything more

Chris Marisic 2009-08-21 18:47:11

Yeah, its pretty ugly... no doubt... but its css... it usually is, LOL

Zoidberg 2009-08-21 19:14:16

Answer 2

+3 A:

In the end I went with a javascript solution where I started with before I came and posted here was

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').css('top', $(this).scrollTop() + "px");
    });
</script>

Which did work and produced the result I wanted however it was very lacking in the effect it achieved because it was very jerky and unpleasant to watch.

I did some more googling today and came across this post: Top Floating message box using jQuery. Which lead me to here

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').animate({ top: $(window).scrollTop() + "px" }, 
            { queue: false, duration: 500, easing: 'easeInOutSine' });
    });
</script>

Which produces a nice clean scrolling effect of my sidebar, the easing in my opinion is what really helps it feel polished.

Chris Marisic 2009-08-24 13:04:55

ansaurus

tags:

views:

answers:

CSS or JQuery Fixed sidebar in website layout

related questions