Hi,
also wie schon im Titel steht, geht es um den header, der ab einer bestimmten scrollhöhe schrumpfen und oben kleben bleiben soll.
in safari funktioniert es eigentlich ganz gut. Lediglich das schrumpfen könnte doch noch etwas "smoother" sein - transition hat da nichts bewirkt. gibts dazu eine idee oder ist das wegen dem flackern?
Dazu kommt auch, dass in der mobilen Ansicht, im schmalen browserfenster bzw. auf dem Schmartphone, der "full_banner" (Schriftzug und grünes "bild") schlecht positioniert ist, wenn sich die seite öffnet ist es nicht ordentlich sichtbar und wenn man scrolled verschwindet es noch mehr - abstände kann man zwar verkleinern, trotzdem scheint die startpositionierung, also sobald der header geschrumpft ist, nicht richtig eingestellt zu sein. Hat jemand einen Hinweis dazu, wie man besser hinkriegt?
nun zum Hauptproblem, dass beim scrollen in Chrome entsteht (sowohl desktop als auch mobil).
Wenn man ganz langsam scrollt, fängt der header wie verrückt zu flackern an und hört nicht auf, es sei den man scrolled weiter. retour ist aber wieder das gleiche problem.
Ich komm nicht dahinter, was es auslöst und wie man es behebt.
Was ich versucht habe:
1) bei header
2)
3)
4) jquery if - else (á la tom durkin https://codepen.io/tomdurkin/pen/nvAjd).
5) einen extra
6) ich habe den ganzen Code nochmal erstellt und stück für stück versucht zu beobachten, wann das Problem beginnt. nach dem setzen von display: flex; im header war irgendwie was anders. was genau kann ich nicht sagen. auf "block" setzen, würde ein extra div bedeuten, das erscheint umständlich.
beim neuschreiben, hab ich mir übrigens die width im geschrumpften nav "kaputt" gemacht, falls sich jmd wundert - wohl irgendwas im media query falsch eingegeben.
7) sticky header über javascript ansprechen (á la https://www.mediaevent.de/javascript/css-position-sticky.html).
leider hat das alles keine Lösung gebracht.
Vorlagen wie der header sein sollte ist zb. der hier im forum oder der auf tierschutzvolksbegehren.at . Nachbau-versuch nicht gelungen. :(
hier mein Code: https://codepen.io/AnSophie/pen/VwewwBO
Bitte um eure Hilfe.
lg
also wie schon im Titel steht, geht es um den header, der ab einer bestimmten scrollhöhe schrumpfen und oben kleben bleiben soll.
in safari funktioniert es eigentlich ganz gut. Lediglich das schrumpfen könnte doch noch etwas "smoother" sein - transition hat da nichts bewirkt. gibts dazu eine idee oder ist das wegen dem flackern?
Dazu kommt auch, dass in der mobilen Ansicht, im schmalen browserfenster bzw. auf dem Schmartphone, der "full_banner" (Schriftzug und grünes "bild") schlecht positioniert ist, wenn sich die seite öffnet ist es nicht ordentlich sichtbar und wenn man scrolled verschwindet es noch mehr - abstände kann man zwar verkleinern, trotzdem scheint die startpositionierung, also sobald der header geschrumpft ist, nicht richtig eingestellt zu sein. Hat jemand einen Hinweis dazu, wie man besser hinkriegt?
nun zum Hauptproblem, dass beim scrollen in Chrome entsteht (sowohl desktop als auch mobil).
Wenn man ganz langsam scrollt, fängt der header wie verrückt zu flackern an und hört nicht auf, es sei den man scrolled weiter. retour ist aber wieder das gleiche problem.
Ich komm nicht dahinter, was es auslöst und wie man es behebt.
Was ich versucht habe:
1) bei header
position: fixed;
gesetzt, dann rutscht aber der "full_banner" im main hinter den header. Höhenangaben wie margin-top usw. wollte ich vermeiden.2)
transition: all 0.4s ease-in-out
.3)
position: sticky;
nur bei header__shrink.4) jquery if - else (á la tom durkin https://codepen.io/tomdurkin/pen/nvAjd).
5) einen extra
<div class="wrapper">
wegen position: sticky; (á la elad shechter https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46).6) ich habe den ganzen Code nochmal erstellt und stück für stück versucht zu beobachten, wann das Problem beginnt. nach dem setzen von display: flex; im header war irgendwie was anders. was genau kann ich nicht sagen. auf "block" setzen, würde ein extra div bedeuten, das erscheint umständlich.
beim neuschreiben, hab ich mir übrigens die width im geschrumpften nav "kaputt" gemacht, falls sich jmd wundert - wohl irgendwas im media query falsch eingegeben.
7) sticky header über javascript ansprechen (á la https://www.mediaevent.de/javascript/css-position-sticky.html).
leider hat das alles keine Lösung gebracht.
Vorlagen wie der header sein sollte ist zb. der hier im forum oder der auf tierschutzvolksbegehren.at . Nachbau-versuch nicht gelungen. :(
hier mein Code: https://codepen.io/AnSophie/pen/VwewwBO
Bitte um eure Hilfe.
lg