senäh

17senäh und so…

HTML/CSS/JS
15. Apr 2013
Kommentare: 1

stickyHeaders: jQuery Plugin für bleibende Überschriften wie z.B. im iOS Adressbuch

Kategorien: HTML/CSS/JS | 15. Apr 2013 | Kommentare: 1

Solltet ihr ein iOS-Device euer Eigen nennen können, habt ihr sicherlich schonmal die Art der Sortierung im Adressbuch oder auch bei der Titelübersicht der Musik-App bestaunt. Es handelt sich dabei erst mal um eine einfache alphabetische Sortierung. Positiv fällt auf, dass der aktuelle Buchstabe immer am oberen Ende stehen bleibt, was der Orientierung gut tut. Richtig fancy ist aber der Übergang zwischen 2 Buchstaben, wobei der Untere den Oberen wegschiebt.

Übergang zwischen 2 Buchstaben in der Titelliste der Musik-App

Übergang zwischen 2 Buchstaben in der Titelliste der Musik-App

Als ich kurz darüber nachdachte, wie ich etwas Derartiges mit HTML, CSS und JavaScript umsetzen würde, sind mir spontan ein paar Lösungsansätze gekommen. Mit ein wenig Hilfe von meinem Kumpel Google wollte ich gegenprüfen, ob es andere Möglichkeit gibt. Doch ich lag gar nicht so verkehrt.

Brian Hadaway hat sich bereits daran versucht, allerdings nur auf genau diesen iOS-Listenstil beschränkt und vor allem ohne die Möglichkeit in den Überschriften mit Transparenz zu arbeiten. Ich wollte die gleiche Funktionalität gern für Überschriften in Blogs sehen. Und schon saß ich in Sublime Text 😀

stickyHeaders in Action

Das Ergebnis in Form eines jQuery Plugins gibt es bei GitHub. Damit ihr euch vorstellen könnt, worum es geht, habe ich ein paar Demos vorbereitet.

  1. einfache Lorem-Ipsum-Demo
  2. der tag und ich mit stickyHeaders (zum Original)
  3. Daring Fireball von John Gruber mit stickyHeaders (zum Original)
  4. Peter Kröners Blog mit stickyHeaders (zum Original)

Was stickyHeaders kann

Neben der grundsätzlichen Funktionalität, die dem Benutzer bei der Orientierung helfen kann und zudem auch einen schnieken Effekt darstellt, gibt es noch weitere Vorzüge. Im Gegensatz zu Brians Plugin könnt ihr mit stickyHeaders:

  • auch halbtransparente Hintergründe via RGBA verwenden, was den Effekt erst so richtig fluffig macht
  • erst ab einer bestimmten Stelle mit dem Effekt einsetzen (z.B. unterhalb des Headers, Logos, etc.)
  • den Effekt ab einer bestimmten beenden (z.B. Footer)

Bei Brians Plugin haben mir vor allem diese Punkte gefehlt.

Wo stickyHeaders abstinkt

Ironischerweise ist die aktuelle Umsetzung auf iOS-Geräten wenig brauchbar. Meiner Meinung nach liegt es an einem Fehler der Rendering-Engine des Mobile Safaris, Brian meint es liegt an zu viel Berechnungen. Jedenfalls funktioniert das Plugin aktuell nicht in iOS-Browsern.

Ich werde vermutlich noch eine Version bauen, bei der nur volldeckende Hintergründe möglich sind, was den Effekt auch auf Mobilgeräten ermöglichen wird. Bis dahin müsst ihr auf stickyHeaders verzichten, falls ihr den mobilen Support unbedingt benötigt.

Außerdem sei an dieser Stelle erwähnt, dass ich stickyHeaders nur im Chrome getestet habe. Sollte aber eigentlich auch in allen anderen ordentlichen Brower laufen.

Lob, Kritik, Anregungen? Anyone?

Falls ihr nach etwas Derartigem gesucht habt, könnt ihr mit diesem Plugin hoffentlich euer Ziel erreichen. Berichtet mir bitte, ob alles funktioniert hat und an welchen Stellen ich noch optimieren könnte.

Zum Abschluss noch mal der Hinweis auf das GitHub-Repo, in dem das Plugin liegt. Dort findet ihr detaillierte Instruktionen zur Anwendung und Hinweise zum Troubleshooting 🙂

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)