I’m trying to achieve an effect that is present in long lists on iOS.
In the contact app there’s a long list of names and there’s a sticky letter showing which is the letter you have scrolled to. When you scroll and the letters overlap the previous is pushed out if the way.
Even with scripting I’m finding it difficult to achieve this effect. How would you do it?
Interested in horizontal and vertical solutions.
Thanks!
Which is the contact app? It would be handy to see this in practice.
EDIT: O, I see—you mean in the Contacts section of the Phone app?
Do you mean something like this Mark from [URL=“http://css-tricks.com/persistent-headers/”]CSS tricks?
There is also a jquery plugin that might fit the bill.
Yeah that’s close to the effect. You really have to see it to know what I mean though. In the contacts section of the phone app when you scroll to the letter B, the letter A becomes unfixed an b pushes A out of the way. I believe these solutions would all snap the headers at a switch point.
It’s the effect of the two letters pushing each other just before they get fixed in place I am trying to achieve.
Hi Mark,
Here’s my attempt at the above assuming I’ve understood correctly as I don’t have an iphone 
That’s brilliant, Paul. I think you’ve nailed it.
Thanks Ralph - I like a challenge
Perfect!
Sorry for the late response, just got back home after 10 weeks in India and Nepal.
Now to see what magic you have conjured up…
Thanks again!
One thing this solution doesn’t nail is that the javascript scroll event listeners only fire when a scroll animation has ended on iOS which breaks the effect.
Should be able to make something work with different events like touch or simple timers if need be.
Cheers!
I wondered where you had got to
Hope you had a good time.
I just noticed there’s a similar demo here but it doesn’t seem as smooth as mine and is about a 1000 lines more code.