Position Sticky

Um ein Element sticky zu machen, musste früher js her. Jetzt geht es mit css position: sticky;

Wie bei anderen Positionsangaben in css, bezieht sich die Positionsangabe auf das nächste Elternelement bei dem ein position vergeben wurde. Hat keins der Elternelemente eine Positionsangabe, wird der body als maßgebendes Elternelement verwendet.

Beispiel für Header:

header.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Beispiel für Footer:

footer.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  bottom: 0;
}