Wie kann ich das Logo tauschen , sobald ich etwas runterscrolle
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="/image/logo.png" alt="Logo">
<img id="bild2" src="/image/html-large.png" 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>