Beispiel:CSS-sticky-h2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">  
 <style>

h2 { 

 background: #337599;
 border-bottom: thin solid #113;
 border-top: thin solid #113;
 color: #fff;
 margin: 0;
 padding: 2px 0 0 12px;
 position: sticky;
 top: -1px;

} h2:nth-of-type(even) { 

  background: #c82f04;

}

</style> 

 <title>position: sticky</title>

</head> <body>

position: sticky

Abschnitt 1

  1. Eintrag
  2. Eintrag
  3. Eintrag
  4. Eintrag
  5. Eintrag
  6. Eintrag
  7. Eintrag
  8. Eintrag
  9. Eintrag
  10. Eintrag
  11. Eintrag
  12. Eintrag
  13. Eintrag
  14. Eintrag
  15. Eintrag
  16. Eintrag

Verkleinern Sie mit Ihrem Seiteninspektor (Developer Tools) den Viewport so, dass Sie scrollen müssen.

Abschnitt 2

  1. Eintrag
  2. Eintrag
  3. Eintrag
  4. Eintrag
  5. Eintrag
  6. Eintrag
  7. Eintrag
  8. Eintrag
  9. Eintrag
  10. Eintrag
  11. Eintrag
  12. Eintrag
  13. Eintrag
  14. Eintrag
  15. Eintrag

Abschnitt 3

  1. Eintrag
  2. Eintrag
  3. Eintrag
  4. Eintrag
  5. Eintrag
  6. Eintrag
  7. Eintrag
  8. Eintrag
  9. Eintrag
  10. Eintrag
  11. Eintrag
  12. Eintrag
  13. Eintrag
  14. Eintrag
  15. Eintrag
  16. Eintrag

Abschnitt 4

  1. Eintrag
  2. Eintrag
  3. Eintrag
  4. Eintrag
  5. Eintrag
  6. Eintrag
  7. Eintrag
  8. Eintrag
  9. Eintrag
  10. Eintrag
  11. Eintrag
  12. Eintrag
  13. Eintrag
  14. Eintrag
  15. Eintrag
  16. Eintrag
  17. Eintrag
  18. Eintrag
  19. Eintrag
  20. Eintrag
  21. Eintrag
  22. Eintrag

</body> </html>

Abgerufen am 27.09.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-sticky-h2.html"