'Freeze panes'-style effect using CSS/HTML

Question

Is it possible/easy to create a web page which would act like a Microsoft Excel spreadsheet that has 'Freeze panes' applied to it? By this, I mean that a header and sidebar should remain fixed in their places but scroll down/right when the page is scrolled.

I need something like this, except that I want it to be applied to a whole page and not a table.

Answer 1

This can be don with switching to position: fixed.

For example a div with the class

#fixed-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #000;
}

will remain fixed in the upmost 100px of your browser viewport when you're scrolling.

This fiddle demonstrates the effect in both vertical and horizontal direction. http://jsfiddle.net/ukzYf/1/

Hope this helps.