CSS: sidebar with fixed position getting cut off

Question

My website has a sidebar with lots of stuff in it—so much that the browser viewport must have a height of at least 1020 pixels in order to see it all without having to scroll (unless, of course, you zoom out).

I'd like the sidebar's position to be fixed so that when you're on a page with lots of content, the sidebar stays in the same position as you scroll. This was very easy to implement:

div#Sidebar {
    position: fixed;
}

This works well on my computer as long as the browser is maximized because my monitor is running at 1920 x 1200. But if I resize my browser window, the sidebar gets cut off. As I scroll through the page's content, I can see all of the page's content, but the sidebar remains cut off due to its position being fixed. So it seems I only have two options:

1. Make the sidebar's position not fixed (bad), but allow users to be able to see all of the sidebar (good).

2. Make the sidebar's position fixed (good), but don't allow users to be able to see all of the sidebar (bad).

Is there a way to combine these two options?

Answer 1

You could do a test in javascript. Either in pure javascript, or with jQuery (would be a lot easier).

Here's an example for jQuery :

$(window).resize(function() {
  if ( $(window).height() < 800) {
    $('#Sidebar').addClass('beAbsolute').removeClass('beFixed');
  } else {
    $('#Sidebar').addClass('beFixed').removeClass('beAbsolute');
  }
});

CSS :

.beFixed {position:fixed;}
.beAbsolute {position:absolute;top:0px;}

By default, use the absolute version, so that user without JavaScript can see the whole sidebar.

Answer 2

Try overflow-y:auto and cap the size. I recommend capping it as something smaller than 1020 pixels, because a lot of people are running on smaller screens (my 15" laptop, for example, is 1366x768, so I'd only be able to see about 3/4) and even those on larger screens don't necessarily maximize their windows. Untested, but height:100% might/should work.

It will add a scroll bar to the div itself, so make sure to account for that, but it will make the div scrollable, which will solve your problem. It does sacrifice a little usability (scrollbars other than the main window ones are generally frowned upon), though.