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

Question

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?

Answer 1

jQuery ScrollToFixedプラグインはまさにあなたが探しているものです。例では、プラグインの使用方法を示します。

あなたの説明に基づいて、これを達成する最も簡単な方法は、オーバーライドするものよりも大きな z-index を各リスト分割器に与えることだと思います。そうすれば、最小オフセットと最大オフセットを処理する必要がなくなり、代わりにオーバーライド要素が単純に前の要素の上に重ねられます。