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

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

Ansophie

Mitglied
17 August 2019
100
2
18
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.
 

Ansophie

Mitglied
17 August 2019
100
2
18
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)
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
Das wird ja ein Fass ohne Boden :wink:
Wie oben schon geschrieben, sollte erst Mal das verkleinerte Logo überarbeitet werden, also nicht der ganze Header geklont und verkleinert, sondern nur das Logo. Sonst fällt es schwer, bei den vielen divs den Überblick zu behalten. Du kannst ja mal versuchen, das selbständig zu erledigen.
 

Ansophie

Mitglied
17 August 2019
100
2
18
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:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
ich blick nicht mehr durch.
Das geht mir teilweise auch so:
1. Codepen ist unübersichtlich, daher habe ich den Code in meinen Editor (Visual Studio Code) kopiert und dort weiter entwickelt.
2. Ich verstehe nicht immer was Du vorgehabt hast und umgekehrt. Daher habe ich mich bei meinen neuesten Änderungen bemüht, sie zu kommentieren.
3. Der Code ist historisch gewachsen, ein häufiges Problem bei der Softwareentwicklung. Daher meine Absicht, ihn zu bereinigen.
Weil der gesamte Code wahrscheinlich zu lang gewesen wäre, um ihn hier zu posten, habe ich ihn zurück in ein Pen kopiert. Was ich geändert habe:
1. Nur der Logo-Container wird jetzt geklont.
2. Anordnung der Elemente des Hamburger-Menüs. Hier habe ich Gridlayout verwendet.
 
  • Like
Reaktionen: Ansophie

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
das jquery in #16 unterscheidet sich von dem in #22.
Das liegt daran, dass in #16 das Logo einfach hart eingeblendet wurde, so dass die anderen Elemente sprangen. Daher in #22 auf weiche Animation umgestellt.
 

Ansophie

Mitglied
17 August 2019
100
2
18
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
Warum hast du denn jetzt Gridlayout verwendet, geht es mit dem ursprünglichen flex nicht?
Weil ich glaubte, dass es einfacher sei, dann man muss keine zusätzlichen Container anlegen, sondern kann es im CSS anordnen, variabel mit Mediaquery.

gute Nachschlagewerke - 1000 Links im Netz sind ja nicht immer das Wahre.
Das stimmt. Ich orientiere mich gern an Selfhtml.
 

Ansophie

Mitglied
17 August 2019
100
2
18
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??
 

Ansophie

Mitglied
17 August 2019
100
2
18
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:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
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?
Wenn Du das Logo mit dem Hamburger auf die selbe Höhe bringen willst, geht das am besten, wenn Du beide in einen gemeinsamen Container legst, etwa so:
Code:
       <nav>
            <div class="menu-container">
                <label for="hamburg" class="hamburg">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </label>
            </div>
            <input type="checkbox" id="hamburg">
            <ul class="menu">
                <li id="current"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </nav>
Und dann das geklonte Logo vor dem Hamburger-Label einfügen:
Code:
$('nav .menu-container label.hamburg').before(clonedLogo);
Dann dürfte es relativ leicht sein, das Layout mit CSS zu gestalten.
 
Zuletzt bearbeitet:

Ansophie

Mitglied
17 August 2019
100
2
18
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???

 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
Ich muss mich korrigieren, mein Vorschlag für das HTML in #34 war nicht ganz korrekt, damit über CSS alle Elemente adressierbar sind, muss das input ganz am Anfang stehen. Damit habe ich das Ganze überarbeitet, so wie ich dich bisher verstanden habe:
  • Geschrumpftes Logo und Hamburger nebeneinander, Hamburger ganz rechts
  • Das Menü öffnet sich dann darunter
 

Ansophie

Mitglied
17 August 2019
100
2
18
danke.

zwei dinge sind mir nicht ganz klar.

1) Das HamburgerLayout bzw. Menu-Layout (abhängig von fensterbreite und ob gescrollt oder nicht) ist jetzt wieder anders. ist das so, weil es durch deine Adaptierung nicht anders möglich ist?

2) weshalb hast du den Container im html und das addClass stickynav entfernt? Das hatte ich ja ergänzt, um das ursprüngliche Layout wiederherzustellen. oder ist das ein versehen, weil du das Removeclass drinnen gelassen hast?!

nur mal so theoretisch: Würde ein "Umbau" für einen verzögerten slideDown Effekt einen anderen Grundaufbau des Navs brauchen? oder ist das, in dieser umfangreichen Arbeit "leicht" einzusetzen?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
1) Das HamburgerLayout bzw. Menu-Layout (abhängig von fensterbreite und ob gescrollt oder nicht) ist jetzt wieder anders. ist das so, weil es durch deine Adaptierung nicht anders möglich ist?
Das ist eher weniger so, weil es nicht anders geht, sondern weil mir nicht ganz klar war, wie Du es haben möchtest. Ich hatte dich so verstanden, dass Du das geschrumpfte Logo links und das Hamburger-Symbol rechts sein soll.

2) weshalb hast du den Container im html und das addClass stickynav entfernt? Das hatte ich ja ergänzt, um das ursprüngliche Layout wiederherzustellen. oder ist das ein versehen, weil du das Removeclass drinnen gelassen hast?!
Den Container habe ich entfernt weil ich dachte, er sei überflüssig. Wenn nicht, beschreibe genauer, was Du damit bezwecken wolltest.

Edit: Vielleicht mal eine Skizze zeichnen, wie es aussehen soll? Muss ja nicht graphisch perfekt sein.
 
Zuletzt bearbeitet:
Werbung: