CODEWITHSUNDEEP
htmlcsslistlistviewjquery-mobile
Dsel
Dsel

Reputation: 1037

Make Jquery mobile list-divider "stick" at top of page when scrolling

I'm using jquery mobile for a project which has a list-view and list-divider in it. I would like to make it so the list dividers stop scrolling when they get to the top of the page, and then keep scrolling again when another list divider bumps into it. For an example of what I mean, check out the iphone "contact's" app. Each letter (which is a list divider) stays at the top of the screen while you are still scrolling through contacts within that letter.

I've tried fixing the position but that obviously is not quite what I want. Is there a way to fix it only when it is at the top of the page? and then "un-fix" it as soon as a different list divider comes up below it?

Upvotes: 1

Views: 1566

Answers (1)

Elimn
Elimn

Reputation: 150

The jQuery ScrollToFixed plugin is exactly what you are looking for. The examples will show you how to use the plugin.

Based on your description, I would say that the easiest way to accomplish this is to give each list divider a z-index greater than the one it overrides. That way you do not have to deal with minimum and maximum offsets, instead the overriding element will simply be layered on top of the previous one.

Upvotes: 1

Related Questions