Um einen Sticky-Header mit CSS zu erstellen, müssen Sie die “position: sticky;” Eigenschaft verwenden. Hier ist ein einfaches Beispiel, wie Sie es tun können.
HTML:
```html
CSS (styles.css):
```css
.sticky-header {
position: sticky;
top: 0;
background-color: #f9f9f9;
padding: 10px;
z-index: 10;
}
```
In diesem Beispiel hat der Header die CSS-Klasse .sticky-header, die bestimmt, dass die Position des Headers “sticky” ist. Die “top: 0;” Regel gibt an, dass der Header an der Oberseite des Viewports kleben soll, wenn Sie die Seite scrollen. “z-index: 10;” sorgt dafür, dass der Header über den anderen Elementen auf der Seite erscheint.
Sie müssen sicherstellen, dass der zu klebende Header einen Elternblock mit einer festgelegten Höhe hat. Andernfalls hat die Position “sticky” keine Wirkung. In unserem Fall ist das body-Element der Elternblock.
Bitte beachten Sie, dass die “position: sticky;” Regel nicht in allen Browsern unterstützt wird. Überprüfen Sie die Browser-Kompatibilität bevor Sie diese in einer Produktionsumgebung einsetzen.
