Sticky Element erzeugt weißen Streifen

  • Hallo, ich habe ein Problem. Ein "sticky-element" funktioniert auf meiner Seite ganz gut - nur ganz unten nicht. Ich kann mir das ganze nicht erklären und habe bestimmt schon 2-3h lang vergebens nach dem Fehler gesucht. Ich habe die Hintergrundfarbe in dem Screenshot sehr dunkel gemacht damit man besser erkennen kann was mein Problem ist. Ich möchte den weißen Streifen unten weg haben und der blaue Kasten soll sich auch dort unten noch am untersten Bildrand befinden.



  • Habe es geschafft!!! Keine schöne Lösung aber funktioniert. Für alle die mal vor dem Problem stehen sollten:


  • Dein Problem resultiert aus den sogenannten "Collapsing Margins".


    Das ul-Element und die li-Elemente haben von Haus aus jeweils einen Außenabstand nach oben. Die beiden erzeugen dann den Abstand.


    Eine sinnvolle Lösung ist deshalb im CSS jeweils beim ul-Element und für die li-Elemente (also zwei Einträge) ein "margin-top: 0;" einzufügen. Dann kannst du auf dein den negativen margin beim Button verzichten, der zwar funktioniert, aber im allgemeinen als unschöner CSS-Code angesehen wird.


    Noch ein Tip, weil ich nicht weiß ob es vor dir so gewollt ist: Mach mal das Fenster schmaler und schaue wie sich der Button verhält. Bei schmalen Fenstern ist der nicht mehr erreichbar.

  • Danke dir! Ich habe die Optimierung für andere Auflösungen noch nicht begonnen. Den Button werden ich wahrscheinlich für kleinere Fenster entfernen. Oder hättest du eine andere Idee? mfG

  • Ich hab grad selbst gecheckt, was meinem JS-Schnipsel gefehlt hat, dass das auch in einem neuen Dokument funktioniert. Es braucht eine Variable, die zuerst definiert wird, in meinem Fall die Navigation nav.


    Code
    const nav = document.querySelector("nav");
            window.onscroll = ()=>{
              this.scrollY > 20 ? nav.classList.add("sticky") : nav.classList.remove("sticky");
            }


    Vielleicht hilft es dir ja weiter.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!