Snook.ca

Handling Onscroll

Way back when I first implemented the fixed comments, I used JavaScript to duplicate the effect in Internet Explorer 6. It was really choppy but it worked. This type of script has been around since the Age of DHTML but I still get the occasional person asking how this was done. So here's the original code I had:

The first block was the IE-only code that checked the vertical scrolling offset and positioned the box accordingly. This actually has an interesting effect in browsers that support position:fixed. As the page slides up, the element slides down.

Looking back on this code, checking for pageYOffset was completely unnecessary since this was for Internet Explorer only and it doesn't support that. Likewise, this code hasn't been tested in IE7 so it's quite likely that this code would still execute despite support for fixed positioning.

The second block of code was for browsers that supported position:fixed. When using fixed positioning, the element is fixed to the viewport. If there's a horizontal scrollbar and the page slides to the left, you need the fixed element to slide with it. Again, looking back at the code, I didn't need the superfluous else/if statements but there you have it.

@Brett: yeah, I'm familiar with that technique. I haven't played with it and I'd be concerned about the side effects of relying on overflow.

@Riddle: I'd have assumed that expressions would result in the same performance as an onscroll event but I'm not noticing any flickr. Is the fixed background on the body required to eliminate the flicker? Otherwise, it might be worth it for me to add back in for IE6 users.

@Karinne: yeah, I guess I wasn't entirely clear. When I redesigned, I decided to drop support for IE6 and stopped using this particular piece of code (hence, it doesn't move in IE6). But since people asked for the code, I thought I'd share.

How's about a new version or perhaps some simple examples of what the best method to achieve this is now? (with IE5.5 to IE7 catered for) Pleeeeeeeeeeeese!

I found your site mentioned in Budd, Moll and Collison's "CSS Mastery" (Friends Of Ed publishing) and I'm trying to get it to work here...http://www.runninghead.com/links.html
If I succeed I'll post a slim and modern version here but I'm no guru.

Expressions sound elegant (for an IE proprietary hack) and Conditional Comments also appeal as we use them anyway.
How few lines might one really need to get IE (v5 to v7 inclusive) to behave like a compliant browser?