Sticky and Scroll to Section

Erleben Sie elegantes Webdesign mit unserem vorbereiteten HTML-Code! Von der Grundlagenerstellung bis zur Navigation und Integration – erkunden Sie die Kunst der geschickten Seitennavigation. Tauchen Sie ein in eine strukturierte Welt des Webdesigns mit unserer durchdachten HTML-Navigation!

HTML-Code für eine Navigation

Nachfolgend finden Sie den HTML-Code für eine Navigation, die entwickelt wurde, um durch verschiedene Abschnitte einer Webseite zu navigieren. Der Navigationscontainer ist als div-Element mit der ID "Nav" und der Klasse "a-nav nav" definiert. Innerhalb dieses Containers befindet sich ein nav-Element mit der ID "Anchor" und der Klasse "anchor", das eine ungeordnete Liste (ul) mit der Klasse "anchor_nav nav_list" beherbergt. Jeder Navigationspunkt wird durch ein Listenelement (li) repräsentiert, das wiederum einen Link (a-Element) mit der Klasse "nav_link js-scroll" enthält. In den Links sind data-scroll-Attribute vorhanden, die auf Abschnitts-IDs verweisen, zu denen der Link beim Klicken scrollt. Der Titel jedes Navigationspunkts ist in einem span-Element mit der Klasse "nav_title" eingebettet.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sticky Navigation mit Scroll to Section</title>
  </head>
  <body>
    <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>
  </body>
</html>

Abschnitt 'Anchor' gestalten:

Geben Sie Ihrem Abschnitt 'Anchor' eine individuelle Note! Nutzen Sie die verschiedenen verfügbaren Klassen, um das Erscheinungsbild nach Ihren Wünschen anzupassen. Besonders wichtig ist die Klasse 'is-sticky', da wir diese dynamisch durch Skript hinzufügen oder entfernen können.

Experimentieren Sie mit den Gestaltungsoptionen und verleihen Sie Ihrem 'Anchor'-Abschnitt eine ansprechende und einzigartige Optik. Diese Anpassungen ermöglichen es Ihnen, die Navigation auf Ihrer Webseite auf beeindruckende Weise zu präsentieren.

// assets/layout.css

body {
  margin: 0
}

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

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

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

.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;
  z-index: 5;
}
.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;
}

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

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

.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;
}

.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;
}

.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);
}

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

  .anchor_nav {
    justify-content: center;
  }
}

Du kannst diese CSS-Datei dann in dein HTML-Dokument einbinden, indem du es in das <head>-Element einfügst:

// index.html

<link rel="stylesheet" type="text/css" href="assets/layout.css" />

Funktionsaufruf StickyNav()

In dieser Version wird document.querySelector verwendet, um das Element mit der ID "Anchor" zu erhalten. Außerdem wurden const und arrow functions für die Variable und die Funktion verwendet, um modernen JavaScript-Standards zu entsprechen. Der Funktionsaufruf StickyNav(); wurde hinzugefügt, um die Funktion zu starten.

// assets/application.js

const stickyNav = () => {
  const anchor = document.getElementById("Anchor");

  if (anchor) {
    const anchorTop = anchor.offsetTop;
    const dataAnchor = Math.round(anchor.getAttribute("data-anchor"));
    const stickyTop = anchorTop + dataAnchor;

    window.addEventListener("scroll", () => {
      const windowTop = window.scrollY;

      if (stickyTop < windowTop) {
        anchor.classList.add("is-sticky");
      } else {
        anchor.classList.remove("is-sticky");
      }
    });
  }
};

// Aufruf der Funktion nach dem Laden des DOM
document.addEventListener("DOMContentLoaded", () => {
  stickyNav();
});

stickyNav Funktion:
- Die Funktion stickyNav wird erstellt, um das Sticky-Navigationselement zu steuern.
Element holen:
- const anchor = document.getElementById("Anchor");: Hier wird das DOM-Element mit der ID "Anchor" abgerufen. Wenn das Element nicht gefunden wird, bleibt anchor null.
Bedingte Überprüfung:
- if (anchor) { ... }: Überprüft, ob das Anker-Element gefunden wurde.
Variablen initialisieren:
- const anchorTop = anchor.offsetTop;: Holen der vertikalen Position des Anker-Elements im Dokument.
- const dataAnchor = Math.round(anchor.getAttribute("data-anchor"));: Holen des gerundeten Werts des "data-anchor"-Attributs des Anker-Elements.
- const stickyTop = anchorTop + dataAnchor;: Berechnen der Gesamtposition, bei der das Sticky-Verhalten aktiviert wird.
Event-Listener hinzufügen:
- window.addEventListener("scroll", () => { ... });: Ein Event-Listener wird hinzugefügt, um auf das Scroll-Event zu reagieren.
Scroll-Position überprüfen:
- const windowTop = window.scrollY;: Holen der aktuellen Scroll-Position des Fensters.
- if (stickyTop < windowTop) { ... }: Überprüft, ob die Scroll-Position größer als die Sticky-Position ist.
CSS-Klassen hinzufügen/entfernen:
- anchor.classList.add("is-sticky");: Fügt die Klasse "is-sticky" hinzu, wenn die Bedingung erfüllt ist.
- anchor.classList.remove("is-sticky");: Entfernt die Klasse "is-sticky", wenn die Bedingung nicht mehr erfüllt ist.
DOMContentLoaded Event-Listener:
- document.addEventListener("DOMContentLoaded", () => { ... });: Stellt sicher, dass der Code erst ausgeführt wird, wenn das DOM vollständig geladen ist.

ID "Anchor" sticky

Dieser Code sorgt dafür, dass das Navigations-Element mit der ID "Anchor" sticky wird, wenn der Benutzer nach unten scrollt und die vordefinierte Position erreicht.

Zum entsprechenden Abschnitt scrollen

Dieser JavaScript-Code sollte die Funktionalität haben und bei einem Klick auf ein Element mit dem Attribut data-scroll zum entsprechenden Abschnitt scrollen. Beachte, dass das Offset (hier als offset definiert) an deine Bedürfnisse angepasst werden kann.

// assets/application.js

...

document.addEventListener("DOMContentLoaded", function () {
  const scrollLinks = document.querySelectorAll("[data-scroll]");

  scrollLinks.forEach(function (link) {
    link.addEventListener("click", function (event) {
      event.preventDefault();

      const targetId = link.getAttribute("data-scroll");
      const targetElement = document.getElementById(targetId);

      if (targetElement) {
        const offset = 134; // Du kannst das Offset anpassen, wenn nötig
        const targetOffset = targetElement.offsetTop - offset;

        window.scrollTo({
          top: targetOffset,
          behavior: "smooth",
        });
      }
    });
  });
});

document.addEventListener("DOMContentLoaded", function () { ... });:

Dieser Event Listener wartet darauf, dass das DOM vollständig geladen ist, bevor er den enthaltenen Code ausführt. Das stellt sicher, dass das Skript erst aktiviert wird, wenn alle HTML-Elemente geladen sind.

Selektieren von Elementen mit dem Attribut "data-scroll":

const scrollLinks = document.querySelectorAll("[data-scroll]");: Hier werden alle HTML-Elemente ausgewählt, die das Attribut data-scroll haben. Diese Elemente werden in einer NodeList gespeichert.

Event-Listener für Klicks auf die ausgewählten Elemente:

scrollLinks.forEach(function (link) { ... });: Eine Schleife durchläuft jedes der ausgewählten Elemente (Links) in der NodeList und fügt jedem einen Event-Listener für Klicks hinzu.

Prevent Default:

event.preventDefault();: Dies verhindert das Standardverhalten des Links, insbesondere das sofortige Springen zur verlinkten Seite. Es stellt sicher, dass der Standardlink nicht ausgeführt wird.

Abrufen der Ziel-ID aus dem "data-scroll"-Attribut:

const targetId = link.getAttribute("data-scroll");: Hier wird die Ziel-ID aus dem data-scroll-Attribut des geklickten Links abgerufen. Dies ist die ID des Abschnitts, zu dem gescrollt werden soll.

Abrufen des Ziel-Elements anhand der ID:

const targetElement = document.getElementById(targetId);: Hier wird das DOM-Element mit der zuvor abgerufenen Ziel-ID gesucht und referenziert.

Überprüfen, ob das Ziel-Element vorhanden ist:

if (targetElement) { ... }: Dieser Block wird nur ausgeführt, wenn das Ziel-Element gefunden wurde. Andernfalls wird der Code übersprungen, um Fehler zu vermeiden.

Festlegen des Offset-Werts:

const offset = 134;: Dies ist ein Offset-Wert, der zur finalen Scroll-Position hinzugefügt wird. Du kannst diesen Wert nach Bedarf anpassen.

Berechnen der Ziel-Offset-Position:

const targetOffset = targetElement.offsetTop - offset;: Hier wird die finale Ziel-Offset-Position berechnet. Das Offset dient dazu, den Scroll-Endpunkt zu justieren.

Scrollen zur Ziel-Offset-Position mit smoothem Verhalten:

window.scrollTo({ top: targetOffset, behavior: "smooth" });: Dieser Befehl scrollt die Seite sanft zur berechneten Ziel-Offset-Position. Das behavior: "smooth" sorgt für einen animierten Scroll-Effekt

Um die IDs für die Abschnitte zu erstellen, zu denen du scrollen möchtest, musst du jedem relevanten HTML-Element eine eindeutige ID zuweisen. In deinem vorhandenen HTML-Code sehen die Navigationslinks so aus:

// index.html

<a class="nav_link js-scroll" data-scroll="Basis" href="#" target="_self" rel="nofollow">
  <span class="nav_title" >Basis erstellen</span>
</a>

Hier hat der data-scroll-Attributwert den Text "Basis", den du als ID für den entsprechenden Abschnitt verwenden kannst. Du kannst dies tun, indem du den id-Attributwert für den Abschnitt selbst festlegst.

// index.html

<div id="Basis">
  <!-- Inhalt des Basis-Abschnitts hier -->
</div>

Wiederhole diesen Vorgang für jeden Abschnitt, den du in deinem Scroll-To-Menü verlinken möchtest. Beachte, dass die IDs in HTML eindeutig sein sollten, also stelle sicher, dass keine zwei Abschnitte die gleiche ID haben.

Sobald du die IDs für deine Abschnitte erstellt hast, werden sie mit den data-scroll-Attributen in den Navigationslinks übereinstimmen. Der JavaScript-Code wird dann diese IDs verwenden, um zu den entsprechenden Abschnitten zu scrollen.

Meld dich an und schreibe ein Kommentar