Sticky Navbar verschwindet hinter Parallax Content

  • Guten Morgen zusammen,


    ich freue mich ein Teil der Community zu sein und hoffe hier viel lernen zu können. Seit einiger Zeit beschäftige ich mich mit HTML und CSS und versuche dies zu lernen und zu verstehen.


    Ich versuche gerade eine Sticky Navigation in eine Parallax Seite einzubauen. Das Problem welches ich habe ist, dass der Content die Sticky Navigation überdeckt!? Auch funktioniert das Responsive Navigationsmenü (Hamburger Menü) nicht mehr, da denke ich liegt der Fehler in der JavaScriptdatei.

    Ich habe schon vieles versucht und auch versucht den Fehler im I-Net zu recherchieren aber ohne Erfolg. Ich könnte mir vorstellen, das es ein Verschachtelungsfehler oder ein Fehler in der CSS ist?!

    Es geht mir hier nicht darum, dass mir einer den richtigen Code schreibt, sondern etwas Hilfestellung gibt um den Fehler zu erkennen und auch zu verstehen warum es so ist wie es ist ;).


    Ich hoffe ihr könnt mir etwas helfen und bedanke mich schonmal im voraus für eure Mühen!


    Liebe Grüße euer Chris

  • Fehlt da was ?

    Code
    1. navbar.classList.add("sticky")

    Ich kann die Klasse in der CSS nicht finden.

    Bitte poste in Zukunft deinen Code in den Code Tags oder erstelle einen Codepen.

    Das habe ich mal gemacht dann können dir die anderen auch helfen, weil nicht jeder hier Daten runterlädt.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=447

    Was hast du mit deiner Sticky Navigation vor?

    Soll die ab x Pixeln Scrollen verschwinden?


    Das Hamburger Menü umschalten kann man auch mit CSS machen, dafür brauch es nicht immer JS.

  • Erstmal vielen Dank für deine Antwort basti1012  :).

    Werde ich mir merken, habe es mal versucht.


    Codepen


    Die Navigation soll beim scrollen oben "kleben" bleiben. Was sie leider nicht macht. Hinzu gibt es anscheinend einen Konflikt zwischen den beiden JS!? Denn wenn ich die sticky_navbar.js im HTML Dokument einbinde, funktioniert das Responsive Navbar JS nicht mehr.


    Zitat

    navbar.classList.add("sticky")

    Ich denke der gehört in die JavaScript Datei, oder?!