Logo in Navigationsleiste beim scrollen wechseln

  • HTML

Es gibt 1 Antwort in diesem Thema. Der letzte Beitrag () ist von Acr0most.

    Logo in Navigationsleiste beim scrollen wechseln

    Hey Leute,

    bei einer Navigationsleiste möchte ich, dass sich das Logo wechselt wenn man runterscrollt. Die Navileiste ist gerade soweit, dass alles steht und die Farbe sich wechselt wenn man runterscrollt.
    Ich habe schon viele Tutorials angeschaut und Foren durchgesucht, finde aber nichts passendes bzw. etwas was ich verwenden kann.

    Kennt jemand Templates, oder einfache Codes die man schnell einfügen kann?


    Danke schonmal im voraus!
    Hey,

    die Frage ist wo genau das Problem liegt - und wie du aktuell die Farben änderst.
    Ich würde ehrlich gesagt an dein Scroll-Event eine Klasse auf deine Navileiste anhängen, die dann die Farbe ändert oder das Logo wechselt.
    Hast du das Image als <img>-Tag eingebunden?
    Ich würde eine Div mit Background-Image machen und dann darauf auch entsprechend eine Klasse hinzufügen/weg nehmen.

    Hier anhand der Farbe - und das kannst du genauso für background-image machen.

    HTML-Quellcode

    1. <style>
    2. body {
    3. margin: 0;
    4. }
    5. .lol {
    6. width: 100vw;
    7. height: 200vh;
    8. background-color: gray;
    9. }
    10. .header {
    11. position: fixed;
    12. top:0;
    13. left: 0;
    14. width: 100vw;
    15. height: 50px;
    16. background-color: blue;
    17. }
    18. .header.changed {
    19. background-color: green;
    20. }
    21. </style>
    22. <div class="header"></div>
    23. <div class="lol"></div>
    24. <script>
    25. window.addEventListener('scroll', function(e) {
    26. if (this.scrollY >= document.querySelector(".lol").offsetHeight / 2) {
    27. document.querySelector('.header').classList.add("changed")
    28. } else {
    29. document.querySelector('.header').classList.remove("changed")
    30. }
    31. });
    32. </script>


    VG,
    Acr0most :thumbup:
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup: