mit href auf eine ID springen

    Also in der Navigation habe ich ein <a href="#meineID" >. Damit sollte doch bei einem Klick darauf der Browser auf <div id="meineID" class="rp-meineID"> springen?


    Aber er springt dann nach weiter unten, anstatt direkt auf das div. Gibt es da irgendwelche Besonderheiten? Z.B. wenn die Navigation <nav> in css mit position: sticky und top 0.

    Hier der HTML Code zu dem er springen soll:

    Kann mir da bitte jemand helfen?


    Danke,

    Reinhard


    P.S.: alles in {{ }} ist Laravel spezifisch.

    {{-- --}} gibt einen Kommentar an.

    {{ url('') }} verweist auf das public Verzeichniss.


    Hallo Stef,

    So habe ich es erstmal auch ausprobiert und so geht es auch. Aber leider nicht bei meinem HTML, CSS Code. Ich denke mal das das Ganze am CSS liegt. Z.B. das der nav tag mit position sticky und z-index definiert ist. Außerdem verwende ich im CSS z-index.


    Ich hänge mal das was ich hier habe hier als zip-Datei an.


    Ich hoffe, irgendwer von Euch kann mir da helfen.


    Danke,

    Reinhard


    test.zip

    Der Kern der Sache ist, dass man auf die sticky-Positionierung verzichtet und Nav und Main mit Flexlayout untereinander anordnet, dann gibt es keine Überlappung.

    Die Höhe des Body habe ich auf 100vh (100% der Fensterhöhe) gesetzt, damit man die Nav nicht aus dem Blickfeld scrollen kann. Gescrollt wird jetzt statt der ganzen Seite nur noch im Main-Container (overflow:auto). Dadurch bleibt die Nav immer sichtbar.

    Der Dank gebührt MrMurphy, der dieses Muster entwickelt hat.

    Danke,

    nur leider funktioniert es nicht so wie ich es mir vorstelle. Ich habe hier ein Image das unter der <nav> angezeigt werden soll. Aber beim Scrollen im <main> soll dieses dann verdeckt werden. <main> soll über dem Image ngezeigt werden.

    Zitat

    <main> soll über dem Image ngezeigt werden.

    Das verstehe ich so, dass das <main> das Image verdecken soll, wenn man herunter scrollt?

    Ich verstehe das Ganze nur ungefähr, aber nicht vollständig. Hast Du es vielleicht online, dass man es sich ansehen kann?

    Sempervivum schrieb:

    Meinst Du es so?:

    https://jsfiddle.net/Sempervivum/gjk7m1p3/25/

    Ja so etwas in der Art.


    Also ich beschreibe es mal so:

    1) Navigation

    Die soll immer ganz oben sein.

    2) ein Bild abhängig von der Bildschirmbreite

    Es soll immer unter der Navigation sein.

    3) <main>:

    In dieser kommen mehrere Bereiche mit eigener id="".


    4) Ein footer mit irgendwelchen Infos. Er soll aber immer nach <main>

    angezeigt werden.


    So im <nav> habe ich Links zu den einzelnen Bereichen mit id="" in <main>.
    Wenn ich auf so einen Link klicke soll der Eintrag über das Bild unter <nav> springen.


    Ich hatte so etwas ähnliches schon mit position: sticky. Nur leider ist dann der Bereich in <main>

    auf Top 0 gesprungen.


    Vielleicht kann mir da jemand helfen?


    Danke,

    Reinhar4d