Sticky Header

Tauche ein in die Revolution des Scrollens! Unser neues Website-Erlebnis bringt dir einen Sticky Header, der mehr ist als nur oben festzukleben. Er ist der Schlüssel zu einer nahtlosen Navigation, einem eleganten Design und einem völlig neuen Maß an Benutzerfreundlichkeit. Erlebe die Zukunft des Surfens – jetzt mit unserem innovativen Sticky Header!

Grundlegenden HTML-Struktur

Wir beginnen mit dem Aufbau einer grundlegenden HTML-Struktur. Innerhalb eines Header-Containers integrieren wir sowohl das Logo als auch die Navigationsleiste. Die Navigation wird als ungeordnete Liste erstellt und erhält die Klasse "nav_list". Jedes Listenelement wird mit der Klasse "nav_item" gestaltet, und in jedem Listenelement befindet sich ein Link mit der Klasse "nav_link". Zusätzlich fügen wir einen Titel mit der Klasse "nav_title" in jedem Link ein. Die Struktur sieht wie folgt aus:

// index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Header Beispiel</title>
    <link rel="stylesheet" href="assets/layout.css">
</head>
<body>
    <header>
        <div class="logo"><a href="#">Logo</a></div>
        <ul class="nav_list">
            <li class="nav_item"><a href="#" class="nav_link"><span class="nav_title">Start</span></a></li>
            <li class="nav_item"><a href="#" class="nav_link"><span class="nav_title">Über uns</span></a></li>
            <li class="nav_item"><a href="#" class="nav_link"><span class="nav_title">Dienstleistungen</span></a></li>
            <li class="nav_item"><a href="#" class="nav_link"><span class="nav_title">Kontakt</span></a></li>
        </ul>
    </header>

    <!-- Hier kommt der restliche Seiteninhalt -->

</body>
</html>

Dieser HTML-Code erstellt eine einfache Webseite mit einem Sticky Header, einem Logo und einer Navigationsleiste.

Externe CSS-Datei "layout.css"

Insgesamt handelt es sich um eine grundlegende HTML-Struktur mit einem Header, der für eine einfache Navigation gestylt ist. Der visuelle Stil wird in der externen CSS-Datei "layout.css" definiert.

// assets/layout.css

body {
  margin: 0;
  margin-top: 6rem;
  font-family: Arial, sans-serif;
}

header {
  background-color: #333;
  padding: 10px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  height: 4.5rem;
  -webkit-box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: center;
  -webkit-transition: height 0.35s, -webkit-transform 0.35s;
  transition: height 0.35s, -webkit-transform 0.35s;
  transition: transform 0.35s, height 0.35s;
  transition: transform 0.35s, height 0.35s, -webkit-transform 0.35s;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.logo a {
  color: #fff;
  text-decoration: none;
}

.nav_list {
  list-style: none;
  display: flex;
}

.nav_item {
  margin-right: 15px;
}

.nav_link {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
}

main {
  max-width: 1024px;
  margin: auto;
}

Der vorliegende CSS-Code definiert das Styling für verschiedene Teile einer Webseite. Hier ist eine Zusammenfassung der wichtigsten Teile:

Allgemeine Einstellungen für den Body:
- Der Seitenrand (margin) wird auf 0 gesetzt.
- Ein oberer Seitenrand (margin-top) von 6 Rem wird festgelegt.
- Die verwendete Schriftart ist Arial oder eine sans-serif-Schriftart.
Header-Styling:
- Der Hintergrund des Headers ist dunkel (#333).
- 10 Pixel Polsterung wird hinzugefügt.
- Der Header ist fixiert (position: fixed) und erstreckt sich über die gesamte Breite der Seite.
- Ein Schatten wird unter dem Header hinzugefügt.
- Der Header hat eine Höhe von 4.5 Rem.
- Die Flexbox wird verwendet, um das Layout zu organisieren.
- Der Header hat einen Übergangseffekt für Höhe und Transformationen.
Logo-Styling:
- Das Logo hat eine Schriftgröße von 24 Pixeln und ist fett dargestellt.
Link-Styling für das Logo:
- Der Textfarbe des Links ist weiß (#fff).
- Die Textdekoration ist entfernt (kein Unterstrich).
- Der Link hat eine fette Schrift.
Navigationsliste (nav_list) Styling:
- Die Liste wird ohne Aufzählungspunkte dargestellt.
- Die Flexbox wird verwendet, um die Listenelemente horizontal anzuordnen.
Listenelement (nav_item) Styling:
- Ein rechter Seitenabstand von 15 Pixeln wird hinzugefügt.
Link (nav_link) Styling:
- Der Textfarbe des Links ist weiß.
- Die Textdekoration ist entfernt.
- Der Text hat eine fette Schrift.
- Die Schriftgröße beträgt 16 Pixel.
Main-Bereich Styling:
- Der Hauptinhalt ist auf eine maximale Breite von 1024 Pixel begrenzt.
- Der Hauptinhalt ist zentriert (margin: auto).

Modernes Styling für einen Sticky Header

Der Code zeigt ein sauberes und modernes Styling für einen Sticky Header mit einer Navigationsleiste und einem Hauptinhalt. Die Flexbox wird effektiv genutzt, um eine flexible und ansprechende Struktur zu erstellen.

Separate JavaScript-Datei erstellen (application.js):

- Der JavaScript-Code wurde in der HTML-Dokument verlinkt und in eine separate Datei namens application.js verschoben.

// assets/application.js

window.addEventListener('scroll', function() {
    var body = document.body;
    var scrollY = window.scrollY;

    if (scrollY > 10) {
        body.classList.add('is-fixed');
    } else {
        body.classList.remove('is-fixed');
    }
});

Verlinken der JavaScript-Datei im HTML-Dokument:
- Im <head>-Bereich des HTML-Dokuments wurde ein <script>-Tag hinzugefügt, um die application.js-Datei zu laden.
- Das defer-Attribut wird verwendet, um sicherzustellen, dass das Skript erst ausgeführt wird, nachdem der HTML-Inhalt vollständig geladen wurde.

// index.html

<script src="assets/application.js" defer></script>

Anpassungen im CSS:
- Im CSS-Bereich wurden kleine Änderungen vorgenommen. Der Stil für die Klasse is-fixed bleibt unverändert.

// assets/layout.css

body.is-fixed header {
  height: 3rem;
  background-color: #d0d0d0;
}
body.is-fixed .logo a,
body.is-fixed .nav_link {
  color: black;
}

Durch diese Änderungen wird der JavaScript-Code in einer separaten Datei organisiert, was die Wartbarkeit verbessert und eine sauberere Struktur schafft. Dies fördert auch die Trennung von Inhalt (HTML), Darstellung (CSS) und Verhalten (JavaScript), was bewährte Praktiken für die Webentwicklung sind.

Meld dich an und schreibe ein Kommentar