Scrollverhalten des Headers
Möchten Sie das Verhalten des Kopfbereiches beim Scrollen beeinflussen, genügt es die Styleregeln in der header.scss anzupassen.
Das Verhalten des Kopfbereiches (header) wird über folgende CSS-Klassen gesteuert, die über JavaScript dem html-Tag zugewiesen werden:
- scrolldirection-top
die Seite wird ganz oben geladen - scrolldirection-down
die Seite wird nach untengescrollt - scrolldirection-up
die Seite wird nach oben gescrollt
Die Style-Regeln zu diesen Klassen sind u.a. in der header.scss definiert. Möchten Sie das Verhalten des Kopfbereiches (welcher meist auch das Logo enthält) beim Scrollen beeinflussen, genügt es diese Styles anzupassen.
Verhalten des minimierten Kopfbereiches
Im Standard verhält sich ein minimierter Kopfbereich nachdem herunter gescrollt wurde, beim Hochscrollen so, daß der Kopfbereich wieder maximiert wird.
Will man dies verhindern und den Kopfbereich erst wieder bei Erreichen des Anfangs der Seite maximieren, tragen Sie dies für das Hochscrollen (.scrolldirection-up) einfach zusätzlich zur Definition mit ein (vorne anfügen).
Auszug aus header.scss: Kopfbereich beim Scrollen verkleinern (minimize)
@else if $headerOnScroll == minimize {
position:fixed;
z-index:100;
top:0;
/* ... */
/*
scrolldirection-up und scrolldirection-down verhalten sich gleich
daher folgender Zeile ".scrolldirection-up" vorne angefügt
/*
.scrolldirection-up &, .scrolldirection-down:not(.navmenu-open) & {
/* ... */
}
}