Scroll Spy

Revolutioniere deine Webseite mit Scroll Spy! Automatische Navigation, die sich dem Nutzer anpasst, und ein reibungsloses Scrollen durch deine Inhalte. Einfach integrierbar, sofort beeindruckend. Bringe deine Webseite zum Leben – mit Scroll Spy!

HTML-Grundgerüsst

Als erstes erstellen wir uns ein HTML-Grundgerüsst

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scroll Spy</title>
    <link rel="stylesheet" type="text/css" href="assets/styles.css" />
  </head>
  <body>
    <header>
      <!-- Hier kannst du den Inhalt deines Headers einfügen -->
    </header>
    <div id="Nav" class="a-nav nav">
      <nav id="Anchor" class="anchor" data-anchor="2">
        <ul class="anchor_nav nav_list">
          <li class="nav_item">
            <a
              class="nav_link js-scroll"
              data-scroll="Basis"
              href="#"
              target="_self"
              rel="nofollow"
            >
              <span class="nav_title">Basis erstellen</span>
            </a>
          </li>
          <li class="nav_item">
            <a
              class="nav_link js-scroll"
              data-scroll="Navigation"
              href="#"
              target="_self"
              rel="nofollow"
            >
              <span class="nav_title">Navigation gestalten</span>
            </a>
          </li>
          <li class="nav_item">
            <a
              class="nav_link js-scroll"
              data-scroll="jqueryScript"
              href="#"
              target="_self"
              rel="nofollow"
            >
              <span class="nav_title">jQuery script</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <main>
      <div id="Basis">
        <!-- Hier kannst du den Inhalt für den Abschnitt "Basis" einfügen -->
      </div>
      <div id="Navigation">
        <!-- Hier kannst du den Inhalt für den Abschnitt "Navigation" einfügen -->
      </div>
      <div id="jqueryScript">
        <!-- Hier kannst du den Inhalt für den Abschnitt "jqueryScript" einfügen -->
      </div>
    </main>
    <!-- Verlinke die externe JavaScript-Datei -->
    <script src="assets/application.js"></script>
  </body>
</html>

Dieser Code erstellt eine einfache Webseite mit einem Navigationsmenü, das die Scroll Spy-Technik verwendet. Lass uns die Struktur und Funktionalität des Codes durchgehen:

HTML-Struktur:

- header: Hier kann der Inhalt des Headers eingefügt werden.
- div#Nav: Enthält das Navigationsmenü.
  - nav#Anchor: Das Hauptnavigationsmenü mit einer speziellen Klasse anchor und einem data-anchor-Attribut mit dem Wert "2".
    - ul.anchor_nav: Die ungeordnete Liste für die Navigationslinks.
      - li.nav_item: Ein einzelner Navigationspunkt.
        a.nav_link.js-scroll: Ein anklickbarer Navigationslink mit einer speziellen Klasse js-scroll und einem data-scroll-Attribut, das den Zielabschnitt angibt.
        span.nav_title: Der sichtbare Text des Navigationslinks.
- main: Der Hauptinhalt der Seite mit drei Abschnitten, jeweils mit den IDs "Basis", "Navigation" und "jqueryScript".
  - div#Basis, div#Navigation, div#jqueryScript: Die verschiedenen Abschnitte der Seite, die durch das Navigationsmenü verlinkt sind.
- script: Ein Link zu einer externen JavaScript-Datei namens application.js, die die Scroll Spy-Funktionalität bereitstellt.

Insgesamt handelt es sich um eine grundlegende Struktur für eine Webseite mit einer festen Navigation, die beim Scrollen automatisch die aktiven Abschnitte hervorhebt. Der tatsächliche Effekt und das Verhalten werden durch die JavaScript-Datei definiert, die die Scroll Spy-Logik enthält.

Die folgende CSS-Datei definiert das visuelle Erscheinungsbild einer Webseite, die das Konzept des Scroll Spy implementiert. Durch die gezielte Anwendung von Stilen und Layouts werden eine ansprechende Navigation, ein durchscheinender Hintergrund und weitere Designelemente geschaffen, um eine benutzerfreundliche und ästhetische Benutzererfahrung zu gewährleisten.

Globale Einstellungen:

body {
  margin: 0;
  margin-top: 8rem;
}

Setzt den Außenabstand des gesamten Dokuments auf null.
Legt den oberen Außenabstand des Body-Elements auf 8rem fest.

Header-Styling:

header p {
  margin: auto;
  max-width: 1024px;
}

Zentriert den Text im Header.
Setzt die maximale Breite des Textes auf 1024px.

Hauptabschnitts-Styling:

main div {
  margin: auto;
  margin-bottom: 1rem;
  max-width: 1024px;
}

Zentriert die Hauptabschnitte und setzt den unteren Außenabstand auf 1rem.
Begrenzt die maximale Breite auf 1024px.

Navigationsleiste (a-nav) Styling:

.a-nav {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: grid;
  justify-content: center;
  align-items: center;
  height: 4rem;
}

Setzt den oberen und unteren Außenabstand der Navigationsleiste auf 2rem.
Nutzt ein Raster-Layout mit vertikaler und horizontaler Zentrierung.
Legt die Höhe der Navigationsleiste auf 4rem fest.

Styling für die verankerte Navigation (anchor):

.anchor {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: #d1d9e6bf;
  margin-top: 0;
  transition: box-shadow 0.25s ease-in-out;
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
  z-index: 20;
}

Verwendet Backdrop-Filter für einen durchscheinenden Hintergrundeffekt.
Setzt die Hintergrundfarbe und Box-Shadow-Eigenschaften für den Fixierungsstatus.
Übernimmt die feste Position am oberen Bildschirmrand.
Verwendet einen Übergangseffekt für die Box-Shadow-Eigenschaften.

Styling für verankerte Links (nav_link) innerhalb der Navigation:

.anchor .nav_link {
  text-decoration: none;
}

.anchor .nav_link:after {
  bottom: -0rem;
}

.anchor .nav_title {
  color: #000;
}

.anchor .nav_item {
  list-style-type: none;
  padding: 1rem;
}

Entfernt die Standard-Textdekoration von anklickbaren Links.
Setzt einen Pseudo-Element-Nachlauf für zusätzlichen visuellen Effekt.
Legt die Textfarbe der Linktitel auf Schwarz fest.
Entfernt Listenpunkte und setzt einen Innenabstand von 1rem für Navigationspunkte.

Sticky Navigation Styling:

.anchor.is-sticky {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
  z-index: 20;
}

Setzt zusätzliche Stile für die fixierte (sticky) Navigation.
Behält die feste Position und fügt einen Box-Shadow-Effekt hinzu.

Aktiver Navigationspunkt Styling:

.anchor .is-active .nav_title {
  color: #009fe3;
}

Ändert die Textfarbe des aktiven Navigationspunkts auf Blau.

Responsives Design:

@media (min-width: 48rem) {
  .anchor {
    margin-top: 0;
    width: 100vw;
  }
}

Für Bildschirmbreiten über 48rem ändert die Navigation die obere Marge und nimmt die volle Bildschirmbreite ein.

Stil für die Navigation:

.anchor_nav {
  max-width: 100vw;
  display: flex;
  margin: 0 -1.25rem;
  overflow-y: hidden;
  padding: 1.25rem calc(3.125vw + 1.25rem);
  scroll-padding: 0 50%;
  -webkit-scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}

Legt die Stile für die gesamte Navigation fest, einschließlich maximaler Breite, Flexbox-Layout und Überlaufverhalten.
Definiert Scroll- und Snapping-Eigenschaften.

Scrollbar-Styling:

.anchor_nav::-webkit-scrollbar {
  height: 0.3125rem;
}
.anchor_nav::-webkit-scrollbar-track {
  background: 0 0;
}
.anchor_nav::-webkit-scrollbar-thumb {
  background-color: #cfa167;
  border: 0.0625rem solid #cfa167;
  border-radius: 0.3125rem;
}

Setzt das Erscheinungsbild der Scrollbar im Webkit-Browser.
Definiert Höhe, Hintergrund und Aussehen des Scrollbalken.

Stil für Navigationselemente:

.anchor_nav-link {
  position: relative;
  display: block;
  font-size: 1rem;
  font-weight: 500;
  padding: 0 1.25rem;
  scroll-snap-align: center;
  white-space: nowrap;
}

.anchor_nav-link::after {
  bottom: -0.125rem;
  left: 1.25rem;
  position: absolute;
  background-color: hsla(220, 10%, 0%, 1);
  content: "";
  display: block;
  height: 0.0625rem;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  transition: transform 0.25s ease-in-out, visibility 0.25s ease-in-out;
  visibility: hidden;
  width: calc(100% - 2.5rem);
}

Stil für jedes Navigationspunkt-Element, einschließlich Position, Schriftgröße und Gewicht.
Definiert Scroll-Snap-Alignment und verhindert Zeilenumbrüche.
Fügt einen visuellen Effekt (Pseudo-Element) hinzu, der beim Hovern sichtbar wird.

Hover-Effekt für große Bildschirme:

@media (min-width: 64rem) {
  .anchor_nav-link:hover::after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    visibility: visible;
  }

  .anchor_nav {
    justify-content: center;
  }
}

Für Bildschirmbreiten über 64rem wird ein Hover-Effekt für das Pseudo-Element hinzugefügt.
Justiert die Ausrichtung der Navigationselemente für größere Bildschirme.

Das sind die grundlegenden Stile in der CSS-Datei. Jeder Abschnitt dient dazu, die Darstellung und das Verhalten der verschiedenen Elemente auf der Seite zu steuern, insbesondere der Navigation.

JavaScript-Code

Dieser JavaScript-Code implementiert eine Funktion für ein sogenanntes "Scroll Spy"-Verhalten. "Scroll Spy" wird verwendet, um automatisch die Navigation zu aktualisieren, wenn der Benutzer auf der Seite nach unten scrollt und verschiedene Abschnitte erreicht. Hier ist eine schrittweise Erklärung:

Eventlistener für das DOMContentLoaded-Ereignis:

document.addEventListener("DOMContentLoaded", function () {

Diese Zeile sorgt dafür, dass der Code ausgeführt wird, sobald der HTML-Dokumentbaum vollständig geladen ist.

Auswahl aller Navigationslinks:

var navLinks = document.querySelectorAll("a.nav_link");

Der Code wählt alle Anker-Elemente aus, die die Klasse "nav_link" haben. Diese Elemente werden als Navigationslinks betrachtet.

Eventlistener für das Scroll-Ereignis:

window.addEventListener("scroll", function () {

Hier wird ein Eventlistener für das Scroll-Ereignis hinzugefügt, um Änderungen beim Scrollen zu überwachen.

Iteration über alle Navigationslinks:

navLinks.forEach(function (link) {

Eine Schleife durchläuft alle ausgewählten Navigationslinks.

Verhindern des Standardverhaltens eines Links:

event.preventDefault();

Dieser Code verhindert das Standardverhalten von Links, um zu verhindern, dass die Seite beim Klicken auf einen Link neu geladen wird.

Abrufen des Attributs "data-scroll" des Links:

var container = link.getAttribute("data-scroll");

Hier wird der Wert des "data-scroll"-Attributs des aktuellen Links abgerufen. Dieser Wert entspricht dem Ziel-Container, zu dem der Link scrollt.

Überprüfung, ob der Container existiert:

if (container !== null) {

Es wird überprüft, ob der "data-scroll"-Wert existiert. Wenn ja, wird der entsprechende Container abgerufen.

Berechnung von Position und Größe des Containers:

var containerOffset = containerElement.offsetTop - 44;
var containerHeight = containerElement.offsetHeight;
var containerBottom = containerOffset + containerHeight;

Hier werden die Position und Größe des Ziel-Containers berechnet.

Hinzufügen/Entfernen der "is-active"-Klasse basierend auf Scroll-Position:

if (
  scrollPosition < containerBottom - 20 &&
  scrollPosition >= containerOffset - 45
) {
  link.classList.add("is-active");
} else {
  link.classList.remove("is-active");
}

Die "is-active"-Klasse wird dem Navigationslink hinzugefügt, wenn der Benutzer sich im Bereich des Ziel-Containers befindet. Andernfalls wird die Klasse entfernt.

Der gesamte Code

Der gesamte Code überwacht das Scrollen und passt die Klasse der Navigationslinks an, um anzuzeigen, welcher Abschnitt auf der Seite gerade sichtbar ist. Hier nochmal der gesamte code:

document.addEventListener("DOMContentLoaded", function () {
  var navLinks = document.querySelectorAll("a.nav_link");

  window.addEventListener("scroll", function () {
    var scrollPosition = window.scrollY;

    navLinks.forEach(function (link) {
      event.preventDefault();

      var container = link.getAttribute("data-scroll");

      if (container !== null) {
        var containerElement = document.getElementById(container);

        if (containerElement) {
          var containerOffset = containerElement.offsetTop - 44;
          var containerHeight = containerElement.offsetHeight;
          var containerBottom = containerOffset + containerHeight;

          if (
            scrollPosition < containerBottom - 20 &&
            scrollPosition >= containerOffset - 45
          ) {
            link.classList.add("is-active");
          } else {
            link.classList.remove("is-active");
          }
        }
      }
    });
  });
});

1.mp4 12.4 MB

Meld dich an und schreibe ein Kommentar