Daniel Hundt - Erfahrung Technologien im Frontend

Die Filterleiste war initial fest oben integriert, so dass diese beim Scrollen aus dem Blickfeld verschwand. Um die Usability zu erhöhen, wurde dann ein komplexes Konstrukt geschaffen, dass erst nach einiger Zeit und mehreren Iterationen stabil funktionierte.

Nimmt die Filterleiste nicht die komplette Bildschirm-Höhe ein, gibt es nur drei Zustände:

• Am Anfang der Trefferliste dockt die Leiste oben an der Trefferliste an (siehe oberes Bild)
• Innerhalb der Trefferliste bleibt die Leiste am oberen Ende des Bildschirms kleben (siehe ganz links)
• Am Ende der Trefferliste bleibt die Leiste am unteren Ende der Trefferliste kleben (siehe zweites von links)

Ein Sonderfall war außerdem, wenn die Trefferliste bei wenig Treffern kleiner war, als die Filterleiste selbst. Dann blieb die Leiste ohne Dynamik immer an ihrer Position im Seitenkontext. Das war noch der einfachere Teil!

Passte die Filterleiste nicht komplett auf den Bildschirm kam u.a. eine Abhängigkeit zur Scroll-Richtung hinzu:

• Wird das untere Ende der Filterleiste erreicht und nach unten gescrollt, bleibt die Leiste unten am Bildschirm kleben (siehe mitte)
• Scrollt man in diesem Zustand nach oben, darf die Leiste weder oben noch unten am Bildschirm kleben, sondern muss mitgescrollt werden (siehe zweites von rechts)
• Wird dann allerdings das obere Ende der Filterleiste erreicht, muss diese wieder oben am Bildschirm kleben bleiben und darf nicht weiter überscrollt werden (siehe rechts)
• Das ganz gilt natürlich auch für die umgekehrte Scroll-Richtung

Erschwerend kommt hinzu, dass zwischen "position:relative" und "position:fixed" hin und her gewechselt wird, um ein unruhiges Bild (nachrutschen der Leiste) zu vermeiden. Durch den alten Internet Explorer kam zusätzlich hinzu, dass der DIV-Kontainer für "position:fixed" im DOM umgehangen werden musste und sich damit die margin- bzw. top-/bottom-Werte im Bezug zum Eltern-Element geändert haben.