Fixed positioning

According to CSS level 2, an element can be positioned relative to the browser window using the style position: fixed: it does not move when the page is scrolled. You can do nice layout things with this in most modern browsers - but not on IE for Windows. Unless you use this script.

Fixed backgrounds

According to CSS level 1, an element’s background can be positioned relative to the browser window using the style background-attachment: fixed: the body of the element acts like a window onto the background image, which stays still when the page is scrolled. You can do nice layout things with this in most modern browsers... but, again, not correctly on IE/Win. (Unless, etc.)

Using fixed.js

This script makes these CSS properties work correctly in IE/Win version 5.0 upwards. Just insert a link to the module anywhere in your HTML (eg. in <head>):

<script type="text/javascript" src="fixed.js"></script>

And add whatever fixed features you like to your stylesheet as normal. On other browsers the script will silently do nothing.

Caveats

IE still doesn’t know that fixed-position elements should not make the window bigger. The upshot is that if you make a fixed-position element larger than the window, you can get a page that will carry on scrolling down past the bottom of the proper page. (This is usually not too bad.)

Don’t put loads of fixed position/background elements on a page - it’ll get slow for many users.

Latest release

Version 1.8: module, example page.

and@doxdesk.com