Wednesday, December 10th, 2008
Pegs: Automate display: fixed++
Category: CSS
Chris Wetherell (the chap who kicked off Google Reader in his apartment) has posted about Pegs a pattern for having one scrollbar but independent scrolling areas.
It is more than display: fixed in that it can be smart. If you visit the demo you will see it in action. After the first time, click around on the other items such as flipping between sizes of areas. You will see that different areas scroll depending on the config.
This is definitely something that people will be skeptical about. It feels weird. It isn’t what we are used too. The demo app also is jumpy and acts a little strange, but it is interesting to play with these ideas.
This implementation uses jQuery, and you can enjoy some minified source.
Related Content:
I don’t think it feels weird at all, it feels kind of natural to me. Shouldn’t this be a part of browsers instead of interface hackery?
I published something very similar in 2006.
http://derekallard.com/blog/post/conditionally-sticky-sidebar/
I think “Long and Long” is where things will get weird, but unfortunately it isn’t in the demo. You’d start losing some control over scrolling specific columns.
Sucks that it doesn’t degrade well. Doesn’t scroll at all with JavaScript turned off.
tomh: What do you mean? It scrolls normally without JavaScript.
disaster in ie6
Also doesn’t work well in Opera 9.62. I didn’t know what was going on until i tried it in FF.
Cool. I like the demo.
.
Also, Yahoo uses a similar effect on http://finance.yahoo.com/tech-ticker (watch the ads in the left column as you scroll down)
This is one of those cases that remind us that web apps are different from desktop apps. Pegged scrolling would feel unnatural in the desktop but it’s very natural in a web page. That’s because we’re used to scroll down a page, lose sight of the (mostly) useless header, keep seeing at least part of the navigation menu and read the most important part of the page (just look at your browser now). The kind of scrolling demonstrated by Chris builds on what we’re used to do and gives us the benefit of keeping the navigation menu in sight.
I didn’t check Chris’ code thoughtfully yet but maybe it’s even possible to keep an horizontal navigation menu in sight and make disappear only the site header above it, e.g.: in the case of Ajaxian, keep the Search, News, Podcasts, etc menu visible at the very top of the page and let disappear only the 50px or so so above it.
It works even with Opera! …NOT!!!