- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 15 Dec 2009 15:43:04 -0600
- To: Brad Kemper <brad.kemper@gmail.com>
- Cc: Doug Schepers <schepers@w3.org>, "Eric A. Meyer" <eric@meyerweb.com>, Mikko Rantalainen <mikko.rantalainen@peda.net>, www-style CSS <www-style@w3.org>
On Tue, Dec 15, 2009 at 2:40 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote: > On Tue, Dec 15, 2009 at 12:47 PM, Brad Kemper <brad.kemper@gmail.com> wrote: >> The iPhone interface for such iPhone apps as "Contacts" solves this very neatly. The sticky content does not accumulate within the viewport, but instead gets pushed off-screen when other sticky content scrolls up to meet it. If you are not familiar with this iPhone convention, then first take a look at this jQuery-based demo I found on the Web: >> >> http://demo.marcofolio.net/iphone_contact/ > > Dude made things *way* too complicated. I grabbed his code, fixed it > so that it does what we actually want (gradual displacement), and just > generally simplified things. If you ignore accumulation, the whole > thing is ridiculously easy to do in JS (11 lines total, 5 significant > lines of code). > > http://www.xanthir.com/etc/stickypos/ For whatever reason, my demo doesn't work well in Firefox (and is even worse in IE). The heading that is currently sticky visibly drags before putting itself back in the right position. Chrome handles it perfectly, though. That's probably why the original developer went with such a hacky approach. ~TJ
Received on Tuesday, 15 December 2009 21:43:47 UTC