diedVIPs

html knowhow

Feststehender Header










Feststehender Header

Scrollen Sie. Der Header wird immer an der selben Stelle stehen bleiben
Quellcode
<html>
<head>
<style type="text/css">
.header {padding: 10px 16px; background: lightgrey;}
.sticky {position: fixed;top: 0;width: 100%;}
.sticky + .content {padding-top: 102px;}
</style>
</head>

<body>
<div class="header" id="myHeader">
   Hier das, was sie fest stehen lassen wollen ...
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</body>
</html>









Kontakt    Datenschutz    Impressum