Fixed Content using CSS/ Dynamic Expressions
CSS lets you position content on your page in a variety of ways, one of which is "fixed". In this mode a piece of content remains completely static without so much as a flinch when the rest of the page is scrolled. One of my predictions for the year 2007 is the eruption of this effect on the web as the majority of visitor browsers support it natively using CSS.
In the following tutorial, I'll discuss how to use "fixed" positioning in CSS, plus how to simulate the behaviour in IE5/6 using Dynamic Expressions, which does not support the direct CSS approach. Shall be begin?
Fixed Content using CSS
There' really only one authentic way of creating fixed content that doesn't scroll on the page, and that's through CSS "fixed" positioning. Like "absolute" positioning, "fixed" places a piece of content outside the normal flow of the document using an explicit x (horizontal) and y (vertical) coordinate system. However, with "fixed", its coordinate system is relative to the viewpoint of the browser, so "5px" vertically for example means "5px" down from the upper left corner of the viewable window, regardless of whether the page is scrolled or not.
<style type="text/css">
#mydiv{
position: fixed;
left: 10px;
top: 50px;
}
</style>
<div id="mydiv">
Some content here
</div>
Remember, in fixed positioning, the left and top values are relative to the upper left corner of the window viewpoint, which automatically changes as the page is scrolled. This creates the static effect.
Fixed Content in IE (5 & 6) via Dynamic Expressions
We can always count on IE to make things more 'interesting" for web developers. In IE6 and below, CSS "fixed" positioning isn't supported (note that IE7 does). In order to realistically implement fixed content, we need a no-fuss way to simulate the effect in IE6 (and perhaps IE5). Dynamic expressions, a IE proprietary feature, fits the bill:
<style type="text/css">
#mydiv{
position: fixed;
left: 10px;
top: 50px;
}
* html #mydiv{ /*IE6 only rule, applied on top of
the default above*/
position: absolute;
top: expression(document.compatMode=="CSS1Compat"?
document.documentElement.scrollTop+50+"px" : body.scrollTop+50+"px");
}
</style>
<div id="mydiv">
Some content here
</div>
Take a look at the highlighted CSS rule. It's targeted exclusively towards IE5 and 6 by way of the Star (*) html hack, and is what will help us simulate fixed positioning in legacy IE5/6 browsers. First, I override the default "position: fixed" declaration with something IE understands, "position: absolute". Then, by using dynamic expressions, I get its "top" attribute to automatically update itself so it's always "50px" below the upper left viewpoint of the browser window:
top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+50+"px" : body.scrollTop+50+"px");
Now, even if you're familiar with IE's dynamic expressions in general, the above line may still look somewhat confusing- why the conditional operator inside it and two different value settings accordingly? Well, depending on whether your page contains a valid doctype declaration at the very top or not, the syntax to referencing certain measurement properties of the body in IE, such as the "scrollTop" property, differs slightly. The above dynamic expression takes into account both possibilities. Note that I've left out setting the "left" property as a dynamic expression as well in IE, making a leap of faith that the page doesn't contain any horizontal scrollbars to warrant this property being dynamic. However, if you wanted to declare it, it would look something like:
left: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollLeft+10+"px" : body.scrollLeft+10+"px");
In any event, the end result is a DIV that stays static on the page in all the major browsers, albeit with some hesitance in IE5/6 in that the effect isn't 100% smooth due to it being simulated programmically. But it's an acceptable compromise, and helps overcome the main mental hurdle to using "position: fixed" on our pages!
