come creare l'intestazione Contatti iPhone scroll Effetto per html?

Question

Ho impostato un jsFiddle di base per dare più idea di cosa mi piacerebbe accadere.

http://jsfiddle.net/nicekiwi/p7NaQ/2/

Speriamo che se si pensa alla pagina di contatto sul iOS per l'iPhone in termini di quale sezione dell'alfabeto di contatti che si sta guardando e come cambia quando si scorre la pagina troverai ottieni l'idea, se non la leggi.

In generale, ho sezioni di contenuto all'interno di una singola pagina di scorrimento verticale a colonna. Quando la parte superiore della prima intestazione (titolo 1 in jsFiddle) raggiunge la parte superiore dello schermo mentre scorri verso il basso la pagina rimarrà in alto fino a raggiungere l'intestazione successiva (titolo 2), nel punto "Titolo 2 "manterrebbe la sua posizione mentre si scorre e" Titolo 1 "verrebbe espulso dal sito e così via per il resto delle intestazioni.

E quando si esegue il backup della pagina avviene il contrario, ad esempio ... "titolo 4" rimarrebbe al suo posto e quando il fondo del contenuto di "titolo 3" è stato raggiunto "titolo 3" apparirà senza problemi sopra "titolo 4" "e rimani nella parte superiore dello schermo fino a raggiungere la parte superiore del suo contenuto.

Voglio creare questo in HTML/CSS con Mootools 1.3 come mia libreria JavaScript di scelta.

Qualche idea su come potrei fare questo? Saluti.

Answer 1

In realtà non ho visto il tuo post fino a quando qualcuno miniera ha sottolineato come un duplicato, dare un'occhiata a questo Freeze Header until Irrelevant (HTML, CSS and JS)