jQuery: fixed top menu like in Facebook and Twitter

Question

How to do this with jQuery?

I know how to do this with css (position:fixed), but IE problems (doesn't know about fixed position) worry me.

Maybe there is some plugin, but I didn't find it...

Thanks!

Answer 1

position: fixed; is an alternative to position: absolute; position: relative; position: absolute; position: relative; and position: static; . position: fixed; is basically the same as position: absolute; except that when the user scrolls the page, the element does not scroll with it, it just says exactly where it was

The problem is that the most popular browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute; which would be better than nothing, it reverts to position: static; as specified by the CSS standard. This has the same effect as having no positioning at all. Note that IE 7 from beta 2 upwards does support position: fixed;

Some authors use the > CSS selector to isolate Internet Explorer and leave the element positioned absolutely in that browser, without the scrolling effect.

div#fixme { position: absolute; left: 0px; top: 0px; }
body > div#fixme { position: fixed; }

or

div#fixme {
  left: expression( document.body.scrollLeft + 'px' );
  top: expression( document.body.scrollTop + 'px' );
}
body > div#fixme { position: fixed; left: 0px; top: 0px; }

I noticed something slightly odd. If I assigned the value to a variable, then used that to assign it to the expression inline, it did update in Internet Explorer 5.5 and 6. It is slightly jerky, but not as bad as many script driven positioning techniques.

top: expression( ( ignoreMe = document.body.scrollTop ) + 'px' );
ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop

or

<style type="text/css">
#fixme {
  /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
  position: absolute; right: 20px; bottom: 10px;
}
body > div#fixme {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
  position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
  right: auto; bottom: auto;
  left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->

Answer 2

There's a great article here about css position fixed and how to accomplish this on IE6 and above. If you need any help with anything let me know.