Sticky (css only)

Sichere Navigation mit dem Sticky-Effekt: Erleben Sie eine reibungslose und benutzerfreundliche Website. Unsere Sticky-Navigation bleibt stets am oberen Bildschirmrand, um Ihnen ein intuitives und komfortables Surferlebnis zu bieten. Scrollen Sie nach unten, um den Effekt selbst zu erleben!

Sticky-Effekts in HTML

Tauchen Sie ein in die Welt des Sticky-Effekts in HTML! Die Sticky-Positionierung ermöglicht es, Elemente auf Ihrer Webseite so zu gestalten, dass sie beim Scrollen an einer bestimmten Position haften bleiben. In diesem HTML-Codebeispiel haben wir eine Sticky-Navigation implementiert. Entdecken Sie, wie einfach es ist, eine benutzerfreundliche und ansprechende Website zu schaffen, bei der die Navigation immer im Blick bleibt. Scrollen Sie weiter, um den Sticky-Effekt in Aktion zu sehen und erfahren Sie, wie Sie diese Funktion in Ihren eigenen Projekten nutzen können.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sticky</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="header">
      <h2>Scrollen Sie nach unten</h2>
      <p>Scrollen Sie nach unten, um den Sticky-Effekt zu sehen.</p>
    </header>

    <nav>
      <span><a class="active" href="#home">Startseite</a></span>
      <span><a href="#news">Nachrichten</a></span>
      <span><a href="#contact">Kontakt</a></span>
    </nav>

    <main>
      <h3>Beispiel für eine Sticky-Navigationsleiste</h3>
      <p>
        Die Navigationsleiste bleibt oben haften, wenn Sie ihre Scrollposition erreichen.
      </p>
      <p>
        <strong>Hinweis:</strong> Internet Explorer unterstützt keine Sticky-Positionierung und Safari erfordert ein -webkit-Präfix.
      </p>
      <!-- Weitere Textabschnitte hier -->
    </main>
  </body>
</html>

Standard-Stile

/* Standard-Stile für den Body */
body {
  margin: 0 auto;
  font-size: 16px;
}

/* Zentriere Header und Hauptinhalt und beschränke ihre Breite */
header,
main {
  margin: auto;
  max-width: 1024px;
}

/* Stile für die Navigationsleiste */
nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Für Safari */
  position: sticky;
  top: 0;
}

/* Stile für die Elemente der Navigationsleiste */
span {
  float: left;
}

span a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hover-Effekt für Navigationsleisten-Elemente */
span a:hover {
  background-color: #111;
}

/* Stile für das aktive Navigationsleisten-Element */
.active {
  background-color: #4caf50;
}

Dieser CSS-Code stellt eine grundlegende Styling-Struktur für eine Webseite mit einer Sticky-Navigationsleiste bereit. Die Navigationsleiste hat eine dunkle Hintergrundfarbe, und Links haben eine weiße Farbe mit Hover-Effekten. Die Klasse .active wird verwendet, um den aktuell ausgewählten Link hervorzuheben. Das Gesamtlayout ist zentriert und hat eine maximale Breite von 1024 Pixeln.

1.mp4 7.6 MB

Meld dich an und schreibe ein Kommentar