Header beim Scrollen in den Top verschwinden lassen aber Navigation fix behalten

  • JavaScript

Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von Orion.

    Header beim Scrollen in den Top verschwinden lassen aber Navigation fix behalten

    Guten Tag Zusammen

    Ich weiss zwar nicht genau wie ich es erklären soll aber ich habe hier eine index Seite basierend auf HTML5 da hab ich nun einen Header in dem zum Beispiel das Logo einer Firma steht, darunter ist die Navigation die ich so fix haben möchte beim runterscrollen was auch funktioniert. Nun möchte ich aber das beim Scrollen der Header mit dem Logo normal eben verschwindet und die Navigation dann nach oben rutscht. Wie stelle ich das am besten an?
    Vielleicht kann ich das irgendwie skizzieren:

    Ich vermute schwer das man das irgendwie mit Javascript hinkriegt, nur habe ich keine Ahnung von Javascript habs bisher nur geschafft einfache Formulare und Buttons zu schreiben.
    mfg

    Orion
    Metal-Schweiz wurde nun offiziell veröffentlich nach all den Jahren :)

    Einen schönen Mittag,

    habe in meinem Archiv noch folgendes Fiddle gefunden, das Grundprinzip sollte ersichtlich sein.

    Liebe Grüße

    // Bedenke, noch vor dem Script das jQuery-Framework zu laden:

    HTML-Quellcode

    1. <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    2. <script>// Hier Script aus dem verlinkten Fiddle einsetzen</script>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „naseweis520“ ()

    Ich versuch so gut wie möglich das Ganze umzusetzen, krieg es aber irgendwie nicht hin. Die Struktur des Files ist auch etwas ungewöhnlich, darum kann ich den header nicht ansprechen. Ausserdem lese und probier ich mich gerade ein bisschen in JS ein weil ich noch nie zuvor wirklich viel damit gemacht habe aber bin noch nirgends :/
    EDIT: Habs halbwegs hingekriegt aber es sieht jetzt irgendwie im IE ein bisschen epilleptisch aus und im FF Springt er ziemlich hart beim scrollen und im Chrome fährt er unter dem ganzen Content mit der Nav durch:

    HTML-Quellcode

    1. <script>$(window).scroll(function(){
    2. $('#header-inner').toggleClass('scrolling', $(window).scrollTop() > $('#header').offset().top);
    3. });</script>
    4. <noscript>
    5. <link rel="stylesheet" href="css/skel.css" />
    6. <link rel="stylesheet" href="css/style.css" />
    7. <link rel="stylesheet" href="css/style-wide.css" />
    8. </noscript>
    9. <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    10. <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    11. </head>
    12. <body id="home">
    15. <!-- Logo -->
    16. <br id="home" />
    17. <div id="header">
    18. <h1><a href="#" class="image logo"><img src="images/logo.png" alt="" /></a></h1>
    19. <div id="header-inner">
    20. <nav id="nav" class="nav" >
    21. <ul>
    22. <li><a href="#home" id="top-link" class="skel-layers-ignoreHref"><span>Home</span></a></li>
    23. <li><a href="#unternehmen" id="contact-link" class="skel-layers-ignoreHref"><span >Unternehmen</span></a></li>
    24. <li><a href="#systemengineering" id="about-link" class="skel-layers-ignoreHref"><span >System Engineering</span></a></li>
    25. <li><a href="#servicemanagement" id="portfolio-link" class="skel-layers-ignoreHref"><span >Service Management</span></a></li>
    26. <li><a href="#valueaddedservices" id="portfolio-link" class="skel-layers-ignoreHref"><span >Value Added Services</span></a></li>
    27. <li><a href="#quicklinks" id="portfolio-link" class="skel-layers-ignoreHref"><span >Quicklinks</span></a></li>
    28. </li>
    29. </ul>
    30. </nav>
    31. </div>
    32. </div>
    Metal-Schweiz wurde nun offiziell veröffentlich nach all den Jahren :)

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Orion“ ()

    Hi,

    mit dem Code von Cross müsste es doch klappen. Wenn weiter gescrollt wird als gewünscht, kannst du dem header mit addClass z.B. ne class "hide-header" zuweisen und den Rest mit CSS erledigen. In CSS kann dann z.B. das Element mit display: fixed; und Positionsangaben (top, left) oder vielleicht auch via translate oder z-index von der Seite versteckt werden. Beim zurückscrollen entfernst du "hide-header" dann mit removeClass() einfach wieder. Falls dein JS-Code nicht greift, erstmal den Code der beim Ereignis ausgeführt werden soll und mit alert() prüfen, ob die Bedingung überhaupt erst erfüllt wird. Vielleicht auch mal den JS-Code vor dem schließenden body-Tag einfügen - manchmal klappt's im head einfach nich.

    Link :thumbup:
    Hello World

    Also ich habs jetzt anders hingekriegt und es sieht so noch schöner aus, hab nur vergessen den Thread zu schliessen :)
    Metal-Schweiz wurde nun offiziell veröffentlich nach all den Jahren :)

Facebook
Telefonspende