Sticky Nav nach Scroll, ohne Java! - wie einbauen?

  • Hallo!


    ich versuche das Hauptmenü auf meiner Startseite auf spezielle Art zu programmieren. Code-Vorlagen habe ich bereits, jedoch schaffe ich es nicht, den Vorlagecode in meinen vorhandenen Code einzubinden. Irgendwie stehe ich am Schlauch. Wär nett wenn mir jemand helfen könnte.


    Voraussetzungen für meine Startseite, die bereits erfolgreich programmiert sind:


    - Beim Start erscheint ein Vollbild (responsive) als Hintergrund.
    - Mittig ist ein Logo platziert.
    - Oben, zentriert befindet sich das Hauptmenü.
    - Durch Scrollen nach unten (oder Klick auf "Portfolio) gelangt man zum Portfolio welches aus Quadratischen Bildern auf weißem Hintergrund besteht.
    - Alles soll in HTML und CSS programmiert sein. (Keine weiteren Programmiersprachen!)


    --> Link zum Code: http://codepen.io/Seiml/pen/EKPPVQ


    Mein Wunsch bezüglich des Hauptmenüs:


    Da das Menü beim Scrollen oben verschwindet (das soll es auch), fehlt es unten beim Portfolio. Hier soll es wieder auftauchen! Es gibt diverse Lösungen die Java benutzen. Java möchte ich vermeiden. Deshalb würde ich gernd folgende Methode einbauen:


    --> http://codepen.io/anon/pen/BKjomb


    Nur wie? Wo muß ich was ändern. Bisher war leider keiner meiner Versuche erfolgreich. Würde mich freuen wenn mir jemand helfen könnte!


    Browser:
    Momentan teste ich im Firefox. Soll letzlich aber auch auf Chrome, Internet-Explorer, Safari und diversen Handys funktionieren.


    Grüße,


    Seiml


    ps: hoffe das ist ok, daß ich den code bei codepen hochgeladen und hier nicht gepostet habe. Falls nicht, bitte bescheidsagen. Dann lade ich ihn hier auch noch hoch. Danke.

  • Hallo


    So wie von dir gewünscht kann das Verhalten nur mit HTML und CSS nicht sinnvoll erreicht werden.


    Der große Unterschied zwischen deiner und der von dir verlinkten Lösung ist, dass bei deiner Lösung die Navigation zunächst sichtbar sein soll, dann nach oben wegscrollen und später wieder oben fixiert eingeblendet werden soll. Bei der von dir verlinkten Lösung ist die Navigation zunächst jedoch nicht sichtbar und taucht erst später auf.


    Bei der von dir verlinkten Lösung ist die Navigation von Beginn an fixiert. Der erste Container (.overlay) wird dann mittels position und z-index vor die Navigation gestapelt. Die restlichen Container befinden sich standardmäßig hinter der fixierten Navigation.


    Vom Betrachter zum Bildschirmhintergrund hin erscheint also zunächst der erste Container mit Inhalt (.overlay), dahinter die Navigation und dahinter der restliche Inhalt.


    Für deine Wunschdarstellung müsste die Navigation doppelt erstellt werden, einmal zum wegscrollen und einmal für die fixierte Version. Das gilt aber als schlechter Stil ohne das deine Besucher dadurch einen greifbaren Vorteil hätten. Die Frage ist ob du das wirklich willst.


    Gruss


    MrMurphy

  • Das geht schon, sogar relativ einfach. Mithilfe vom z-index wird das Menü einfach hinter dem entsprechenden Container verborgen und unter diesem eben nicht mehr: codepen Beispiel


    HTML
    <nav id="main_menu">[...]</nav>
    <section id="content1">[...]</section>
    <section id="content2">[...]</section>


    Du meinst übrigens Javascript, nicht Java. Java hat in modernen Webanwendungen absolut nichts mehr verloren :)

  • Vielen Dank für Euer Mitdenken!


    @ Basi:
    Leider passt das nicht ganz zu meiner Seite. Die Startseite ist folgendermaßen aufgebaut: Im Hintergrund ein Vollbild (Foto). Darauf, am oberen Bildschirmrand, zentriert, das Menü (nur Text, durchsichtiger Hintergrund). Das Menü liegt also in Textform Quasi über dem Hintergrundbild. Deshalb kann sich auch nichts über das Menü schieben, denn der Hintergrund liegt unter dem Menü. Leider.


    @ MrMurphy:
    Du hast vollkommen recht. Ich dachte auch an ein doppeltes Menü. Eins das wegscrollt und eins das später wieder erscheint.
    Du schreibst das gilt als schlechter Stil. Gibts nen grund dafür? Ich bin blutiger Anfänger im Programmieren. Bring mir alles selbst bei. Hab nicht so viel Ahnung von guten und schlechten Stilen und warum diese gut oder schlecht sind. Würde mich sehr freuen wenn Ihr mir das erklären könntet.


    @ Alle:
    Ich sträub mich ein bisschen vor Javascript (damit wäre mein Ziel recht einfach realisierbar, denk ich). Aus folgenden Gründen:
    1. ich kenn mich damit noch gar nicht aus. Würde es deshalb gerne umgehen. Falls das nicht möglich ist, muß ich natürlich in den sauren Apfel beißen und mich da auch rein fuchsen.
    2. ich hab bedenken daß Javascript meine Seite unsicher oder Anfällig für Manipulationen und Fremdzugriffe machen könnte. Hat mir mal jemand erzählt. Ich weiß aber auch nicht ob das stimmt. Habt Ihr Tips diesbezüglich?


    Was empfehlt Ihr? Schlechten Stil oder Javascript? ?(


    Grüße,


    Seiml

  • Dann bleibt dir wohl nur Javascript.


    Unsicher wird deine Seite dadurch definitiv nicht, dabei geht es um Cross Site Scripting (XSS). Es wird versucht durch bestehenden Code Javascript zu injizieren, um beispielsweise Sessions auszulesen. Ich gehe bei deinem Projekt nicht davon aus, dass du überhaupt entwendbare Sessions verwendest. Durch heutige Technik (Browser/Server) sowieso nicht mehr wirklich eine Gefahr.


    Du musst auch nicht viel lernen für so ein kleines Vorhaben.

Jetzt mitmachen!

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