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.