Kopfbereich abhängig von der Scroll-Richtung ein- bzw. ausblenden

01. Apr 2016

Mit Hilfe der neuen Klassen scrolldirection-down, scrolldirection-up und scrolled-top, welche von der ui.js automatisch im HTML-Element ergänzt werden, können Sie z.B. den Header beim Scrollen nach unten ausblenden und beim Scrollen nach oben wieder einblenden.

Beim Scrollen nach unten kann man davon ausgehen, dass der Benutzer den Kopfbereich nicht benötigt, da er sonst wohl kaum nach unten scrollen würde. Insofern bietet es sich an, in dem Fall den Kopfbereich zu reduzieren oder gar komplett auszublenden.

Scrollt ein Benutzer wieder nach oben, kann der Kopfbereich unabhängig von der aktuellen Scroll-Position sofort wieder eingeblendet werden, da in dem Moment die Wahrscheinlichkeit steigt, dass er den Kopfbereich nutzen will.

Folgende Definitionen können sinnvoll sein:

Scrollen nach unten => komplettes Ausblenden des Headers
Scrollen nach oben => minimiertes Einblenden des Headers
Scrollposition entspricht 0 => vollständiges Einblenden des Headers

Quelltextbeispiel für den Einsatz mit einem fixierten Kopfbereich

.scrolldirection-up #blockTop                {padding-bottom:8px}
.scrolldirection-up #blockTop #logo          {margin:2px 0 12px 0}
.scrolldirection-up #blockTop #logo img      {height:23px;margin:12px 0 0 0}
.scrolldirection-up #blockTop #searchBox     {margin:5px 0 0 0}

.scrolldirection-down #blockTop              {margin-top:-40px;padding-bottom:8px}
.scrolldirection-down #blockTop #logo        {margin:2px 0 12px 0}
.scrolldirection-down #blockTop #logo img    {height:23px;margin:12px 0 0 0}
.scrolldirection-down #blockTop #searchBox   {margin:5px 0 0 0}

Das obige Beispiel stammt aus der aktuellen Seite und wird mit einem transition -Befehl garniert und ohne zusätzliches JavaScript, rein auf Basis der von der ui.js gesetzten CSS-Klassen eingesetzt.