Html Sticky header funktioniert nicht?
Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.
------HTML------
<div id="header">
<img src="bilder/Logo.png" alt="Logo Fliesen"></img>
<div id="flexbox">
<nav>
<ul class="menu">
<div class="flexitem" id="navFlex">
<li><a href="index.html">Home</a></li>
<li><a href="engagement.html">Unser Engagement</a></li>
<li><a href="contact.html">Kontakt</a></li>
<li><a href="about.html">Über mich</a></li>
<li><a href="referenzen.html">Referenzen</a></li>
</div>
</ul>
</nav>
</div>
<div class="social" class="flexitem"></div>
</div>
-----CSS------
#header {
height: 80px;
left: 0;
right: 0;
width: 100vw;
border-bottom: 1px solid #DEDCD9;
background-color: white;
display: flex;
overflow: hidden;
position: sticky;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + #bsp {
padding-top: 60px;
}
------Script-------
<script>window.onscroll = function() {stickyH()};
var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
HTML,
Webseite,
CSS,
HTML5,
Code,
Webdesign,
Webentwicklung,
Frontend
