Zwei verschiedene Logos

Wie kann ich das Logo tauschen , sobald ich etwas runterscrolle

Der hier verwendete Code

<html lang="en"><head> <meta charset="UTF-8"> <title> DESIGNIFYR </title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background: #000; min-height: 200vh; } header{ position: fixed; top: 0; left 0; width: 100%; display: flex; justify-content: space-around; align-items: center; transition: 0.6s; padding: 40px 100px; z-index: 100000; } header.sticky{ padding: 5px 100px; background: #fff; } header img{ width:200px; background:black; } header ul{ display: flex; } header ul li{ list-style: none; } header ul li a{ margin: 0 15px; text-decoration: none; color: #fff; letter-spacing: 2px; font-weight: 500px; transition: 0.6s; } .banner{ width: 100%; height: 100vh; background: black; } header.sticky ul li a{ color: #000; } .sticky #bild1,#bild2{ display:none; } .sticky #bild2,#bild1{ display:block; } </style> </head> <body> <header> <img id="bild1" src="https://www.designifyr.com/pictures/logo.png" alt="Logo"> <img id="bild2" src="https://www.html.de/styles/uix/images/html-large.png?a=3" alt="Logo"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </header> <section class="banner"></section> <script> window.addEventListener("scroll", function(){ var header = document.querySelector("header"); header.classList.toggle("sticky", window.scrollY > 0); }) </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!