• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Problem mit sticky shrinking header - flackert extrem in chrome

Ansophie

Mitglied
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 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
 
Werbung:
Wow! da wäre ich nie draufgekommen. Danke dir!

Wäre es aber vielleicht möglich, das kleine grüne kästchen "header_logo", wie zuvor im header__shrink, doch links im sticky nav einzublenden?
Vielleicht passt hier die jquery addClass? Wenn nötig könnte man eventuell den navbalken entsprechend breiter (im addclass-modus) gestalten - so als anti-endlosschleifen-maßnahme?

hast du dafür einen vorschlag?
 
Ja, genau. Das große Logo wird zum kleinen reduziert.
(Darauf bin ich sehr stolz, dass es mir mit einem svg gelungen ist...auch wenn es wahrscheinlich wegen der höhe zur Entstehung der endlosschleife :D beigetragen hat oder ursache ist.)

Deshalb wäre dein 2. Vorschlag vielleicht besser. Ist das dann nicht eh so ähnlich wie meine idee bzw. wie es in meinem code war mit der addclass?

Nur so eine überlegung: wenn die reduzierte höhe des svg mitursache für das flackern war - wäre dann nicht auch eine Möglichkeit im svg selbst eine Ergänzung zu setzen? Die vielleicht nicht zwingend zu einer höhenveränderung des divs führt, sondern das Header_logo wie auf der seite vom tierschutzvolksbegehren in der startposition überlappen lässt (mit z-index?!) ? Man müsste vielleicht aber generell die divs im header anders zusammensetzen. Weißt was ich mein?
 
Werbung:
interessant, das mit dem clone kannte ich noch nicht.

muss dazu noch konkretisieren: durch die direkteingabe zum shrink-befehl im svg wird das logo nicht nur kleiner, es werden auch teile davon ausgeblendet, ohne "sprite". hoffentlich geht es dann trotzdem auch mit der clonefunktion, weil es ja eigentlich nicht komplett geklont wird.

was meinst du mit animierter breite, wie es sich von "dort nach da" bewegt anstatt plötzlich da zu sein oder die Höhe vom nav??!

was ich doch noch gern wissen würd, warum hat es in safari nicht geflackert?
 
Scrollposition mit console.log ausgeben

Leider kenne ich mit der console noch nicht gut aus.

über die breakpoints erscheinen 2 hinweise, etwas zu (return "function=typeof e&&"number"! = typeof ...) und das andere scheint auf removeClass im jquery-script hinzuweisen. Bezüglich Scrollposition erhalte ich einige zahlen zu screenTop, scrollX und scrollY usw..... Ich muss gestehen, weiter weiß ich nicht.
was mach ich jetzt?

besteht nicht etwas hoffnung, dass es doch noch eine zusätzliche Möglichkeit gibt, die endlosschleife zu beheben.
 
Deine Lösung und deine Erklärung sind sehr hilfreich!
Ich würd nur gern sehen, was sich da genau spießt, also die zeile(n) im code im detail, die den bug auslösen. Viell erwarte ich mir aber auch zuviel von der console-analyse??
 
Werbung:
hoffentlich geht es dann trotzdem auch mit der clonefunktion, weil es ja eigentlich nicht komplett geklont wird.
also das hat prima geklappt.

Leider bekomme ich aber meine Navigation/menü balken bzw im sticky nav als kleines Hamburgerkasterl rechts nicht mehr hin. header__shrink ist weg, ok.
aber nav label bzw. nav .header_logo.visi kann ich nicht so recht nachvollziehen, wie du das gemeint hast.

die mysteriöse endlosschleife lässt mir keine Ruhe.
habe nochmal den ursprünglichen Code durchgesehen.
mir folgendes aufgefallen:

Wenn man in jQuery scrollTop() > 130 auf 100 runtergesetzt, dann flackert nicht der header, sondern der main-container und der scrollbalken. Das Flackern ist anders und nicht ganz so arg bevor es umspringt - als ob etwas blockieren würde.

was bedeutet das? oder ist das dasselbe Problem nur verlagert. Der scrollbalken springt übrigens ca. 50px nach unten aber der header bewegt sich nicht, nur das main rutscht etwas rauf. o_O

und dann hab ich noch was entdeckt.
header_content hat keine festgelegte height,
bei .header__shrink .header_content steht aber margin: 0
.header__shrink .header__logo a hat background-size: 288px; und overflow: hidden; theoretisch wird doch overflow-y bei übergroßen Inhalten eingesetzt. Wenn man das setzt, dann wird das flackern etwas reduziert...

Dadurch ändert sich auch die Scrollposition zu einem kleineren Wert.
sollte overflow-y dann nicht dazu beitragen, dass eine Änderung der scroll-position "egal" ist, weil die Elemente nicht wirklich nach oben rutschen?
 
sorry, da kenn ich mich leider nicht aus. was heißt "console.log in den code schreiben"? wenn ich meine jqueryzeilen in die console schreibe, krieg ich eine auflistung, springen tut da nix. keine ahnung was ich damit anfangen soll. na macht nix, ich möcht keine umstände machen.

Leider bekomme ich aber meine Navigation/menü balken bzw im sticky nav als kleines Hamburgerkasterl rechts nicht mehr hin. header__shrink ist weg, ok.
aber nav label bzw. nav .header_logo.visi kann ich nicht so recht nachvollziehen

wenn du mir das bitte noch aufschlüsseln könntest, würd ich mir leichter tun, das ursprüngliche design wiederherzustellen.
 
Werbung:
Bei scroll events empfiehlt es sich, throttling einzubauen.
bei jedem scroll(function)-Einsatz?

auf underscorejs steht var throttled = _.throttle(updatePosition, 100); $(window).scroll(throttled); .

wie soll das in ... $(window).scroll(function () { $(this).scrollTop() > 250 ? ... eingebaut werden, wenn da scroll(function) steht? oder bezieht sich deine empfehlung auf etwas anderes?

wie ist das dann mit $(function() { $('.lazy').lazy({ enableThrottle: true, throttle: 250 }); }); wenn man statt dem .lazy die entsprechenden elemente einsetzt? oder ist das das gleiche?

Jetzt wird der verkleinerte Header neben der nav-Leiste angezeigt

ja so in etwa ist es ja in meinem pen (#1).

aber,
in deiner vorhergehenden version - wo header__shrink weg war, wurde nur das logo nach unten gestellt (und war zunächst auch gleich groß). über nav .header_logo.visi a ließ sich das problemlos ansprechen und einstellen.

wenn ich das richtg verstehe, hast du jetzt über jquery den gesamten header in den kleinen bereich geklont?!
wäre es nicht einfacher, nur das logo zu klonen?

übrigens: wenn man in deinem pen bei nav padding: 0.5rem 3.125rem 0.5rem 3.125rem; setzt, dann ähnelt es schon noch mehr dem ursprünglichen layout.
weiter bin ich aber noch nicht gekommen, weil ich ich das .menu nicht nach unten aufklappen kann, die klassen heißen ja jetzt wieder anders..
 
header__shrink auch das Logo selber bzw. das SVG beeinflusst.

ja und nein. das logo wird im css unter @media (min-width: 288px) angesprochen (auch in deinem pen von #16).
wenn man einen border setzt, kann man das gut erkennen. im svg bezieht sich ein css-befehl auf dieses @media (width: 288px).

In meinem Pen aus #16 klappt das Menü schon herunter,
Komisch, bei mir nicht. ich hab links das logo, dann das breite label.hamburger und wenn ich das anklick klappt rechts neben dem label das .menu auf - letzteres aber korrekt in flex-dircetion: column;
.menu sollte nach nach unten aufklappen, also unterhalb des labels.


ich könnte also theoretisch, dein js von #6 nehmen, wo nur header_logo geklont wird. allerdings hast du dort nav label geschrieben, jetzt aber nav input?! bitte hilf mir jedenfalls, die class-namen richtig umzubenennen, damit ich wieder weiß die einzelnen Elemente bearbeiten kann.

Mein Vorschlag: Links das Logo und rechts das Hamburger-Symbol. Das Menü selber dann darunter.
d'accord. so war es ja eigentlich. ;)

du hast in #6 "animierte Breite" erwähnt. hast du damit die "hüpfende" höhenänderung vom nav gemeint, die entsteht weil das kleine logo plötzlich auftaucht?
vielleicht könnte man ja hier die "animation" einbauen, wie sie auf der Tierschutz-Seite zu sehen ist (link in #1). Die gefällt mir sehr gut.
Da verschwinden header und nav beim scrollen zunächst komplett, dann "rollt" aber ein abgespecktes nav inkl Logo wieder sanft runter. ist das kompliziert? hat dieser effekt einen namen? ich konnte leider keine anleitung finden, um es nachzubauen.
 
Diese Animation ist jedenfalls dem "hüpfen" von vorher vorzuziehen.

Ich hoffe ich nerv jetzt nicht zu sehr, wenn ich das jetzt nochmal frage, aber kannst du das vielleicht auch bitte so zaubern wie in #21 beschrieben?
Hast du dir diese Referenz-Seite angesehen? (nur zur info: dort auf der startseite sind keine grauslichen Bilder)
 
Werbung:
hey, also ich wollte das umschreiben. allerdings muss ich gestehen, dass ich mich nicht mehr auskenne.

das jquery in #16 unterscheidet sich von dem in #22.

Wenn ich header_logo statt header einsetze, verschwindet das logo und es bleibt beim sticky header.

wenn ich deine erste jquery-version auf meinem ursprünglichen code mit css-anpassung verwende, dann passt das nicht 100%. das Logo ist dauerhaft im sticky nav zu sehen, ich hab irgendwas vergessen umzustellen.

ich blick nicht mehr durch. :confused:
 
Daher habe ich mich bei meinen neuesten Änderungen bemüht, sie zu kommentieren.
Jetzt versteh ich deinen jQuery-code besser. danke.

Ich verstehe nicht immer was Du vorgehabt hast und umgekehrt.
Tut mir leid. ich denk zu kompliziert, bleib immer an den Details hängen, weil ich möglichst viel verstehen will. Dann tauchen tausend Fragen auf. Plus mir fehlen halt definitiv die Basics und die Routine und vor allem gute Nachschlagewerke - 1000 Links im Netz sind ja nicht immer das Wahre.

Ich trau mich schon gar nicht mehr fragen...

Warum hast du denn jetzt Gridlayout verwendet, geht es mit dem ursprünglichen flex nicht?

In die grids muss ich mich ja auch erst mal wieder reinlesen.
 
Werbung:
Also ich muss sagen mit flex ist es mir dzt. lieber. Die Umstellung braucht grad zu viel extra zeit. :(
Ich möcht ja auch das ursprüngliche Design/layout des header__shrink (also auch kleines label.Hamburger rechts und das aufklappende Menu usw.) wie in #1 haben und das alles passend mit media queries.

Altes css mit neuem jquerycode lässt sich ja nicht einfach so gemeinsam übernehmen.

Ich versuch zwar grad dieses grid zu verwenden, aber es geht super holprig voran.

Ich habs grad mal geschafft Nav .menu width: 100%; zu setzen. :rolleyes: Und das hat nix mit grid zu tun.

Du schreibst

/* Gridareas definieren
unter diesen Namen werden die Elemente dann bei
grid-template-areas angesprochen */

Muss ich diese namen wie klassen ansprechen, um das layout zu verändern? Zb. Logo links, hamburger rechts und großer gap dazwischen oder die platzierung des aufklappenden Menüs??
 
hey, danke dir fürs umstellen auf flex.

Zuerst wollte ich das ganz brav nachbauen - das ging auch gut, aber kurz vorm finale, hab ich es schon wieder zum flackern gebracht. :rolleyes:


der 2. versuch ist besser gelungen.
Meine Ergänzungen: einen allgemeinen container im nav und ein addClass ab scroll (style dazu im css ganz unten), weil es für mich so leichter war, das ursprüngliche layout nachzubasteln.

nun häng ich aber leider wieder fest:

der "nav .menu-container" lässt sich einfach nicht auf die größe des label.hamburg (weder als Balken noch als Hamburger) einstellen. jetzt versperrt menu-container dem geklonten logo den Weg, um auf gleiche Höhe mit dem label.hamburg zu rutschen, glaube ich. was habe ich übersehen?

Es hat funktioniert, als ich im jQuery statt nav menu-container, label.hamburg gesetzt hab. Ich glaube, dass war aber auch der Punkt, als es wieder zum flackern angefangen hat.

Mir ist zwischenzeitlich mal passiert, dass der ganze header ins nav geklont wurde:
wenn man im jQuery statt "header .header_logo“ nur „header_logo“ schreibt, scheint das ausreichend zu sein, um zu funktionieren.
was sagst du, geht das?

Hier der Code: https://codepen.io/AnSophie/pen/PoZNVpo
 
Zuletzt bearbeitet:
Bitte Hilfe, ich verzweifle...

Ich habs so gemacht wie du gesagt hast und es ist mir auch gelungen.
war voll happy und dann seh ich, dass das menu nach dem click auf den hamburger neben dem label aufgeht sowohl in desktop als auch in mobile.
und der hamburger wurde nicht mehr zum x.

$('nav .menu-container label.hamburg').before(clonedLogo);
stattdessen habe ich $('nav .menu-container input').before(clonedLogo); gesetzt, das x ist zwar wieder da, aber das dropdown spinnt immer noch. :(

ich hab grad soviel probiert, dass ich schon gar nicht mehr weiß, wie ich das vorhin mit dem menu-container hingekriegt hab...

Nun in codepen rüberkopiert und jetzt ist es dort kaputt - clonedlogo versteckt sich. hat das js was, dort steht Uncaught ReferenceError: $ is not defined.

why???

 
Werbung:
Zurück
Oben