diedVIPs

html knowhow

Kalender mit Tagesdatum










Kalender mit Tagesdatum

Mit diesem kleinen Modul können Sie sich per Zeitbalken anzeigen lassen, wie weit sie eine Seite bereits runtergescrollt sind.

So sieht´s aus


  • August
    2021
  • Mo
  • Di
  • Mi
  • Do
  • Fr
  • Sa
  • So
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
Quellcode
<html>
<head>
<style type="text/css">
.header {position: fixed;top: 0;z-index: 1;width: 100%;background-color: #f1f1f1;}
.header h2 {text-align: center;}
.progress-container {width: 100%;height: 8px;background: #ccc;}
.progress-bar {height: 8px;background: #04AA6D;width: 0%;}
.content {padding: 100px 0;margin: 50px auto 0 auto;width: 80%;}
</style>
</head>

<body >
<div class="header">
<h2>Scroll-Fortschritts-Anzeiger</h2>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div> </div>
<div class="content">
   .... Hier das, was Sie scrollen lassen ...
</div>
</body>

</html>








Kontakt    Datenschutz   Impressum