'Freeze panes'-style effect using CSS/HTML

css, html

Solution

This can be done in using `position: fixed` line in CSS class.

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.

Problem

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.

Original source