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!
|
