Klebrig, Glatt, Active Nav

0
13

Genau wie der Titel sagt! Hier ist eine sidebar-navigation bar, die…

  1. Verwendet sticky-Positionierung. Es bleibt auf dem Bildschirm, wenn Sie können, aber nicht überlappen Sie die Kopfzeile, Fußzeile oder jemals in einem der links zugegriffen werden.
  2. Scrollt reibungslos auf die Abschnitte, die Sie zu klicken.
  3. Aktiviert das aktuelle nav basiert auf die scroll-position (es ist eine einzelne Seite der Sache).

Finden Sie den Stift, Klebrig, Glatt, Active Nav von Chris Coyier (@chriscoyier) auf CodePen.

Sticky

Es ist einfach zu werfen, position: sticky; top: 0; auf etwas. Aber es funktioniert, es muss innerhalb einer größer übergeordneten element. So, die ungeordnete Liste (<ul>) in der navigation (<nav>) funktioniert Super hier. Dank der CSS-grid-layout, das <nav> ist so hoch wie das <main> content-Bereich. Beachten Sie jedoch, dass wir auch gotta position: -webkit-klebrig; für iOS.

Ich auch warf in einer magischen Zahl für die vertikale Medien-Abfrage, so dass Sie klebt nicht in der Weise, dass Sie nicht auf die unteren Navigations-Elemente:

/* Only Stock, wenn Sie können passen */
@media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}

Glatt

In meinem ersten Riss an diesem, dachte ich über JavaScript-basierte reibungslosen Bildlauf. Es ist auch native in diesen Tagen mit keine Notwendigkeit für frameworks. Du kannst ein element und reibungslos navigieren Sie zu:

Dokument.querySelector(‘.hello’).scrollIntoView({
Verhalten: ‘glatt’
});

Bringen, dass eine beliebige Anzahl von nav…

lassen Sie mainNavLinks = document.querySelectorAll(“nav ul li a”);

mainNavLinks.forEach(link => {
link.addEventListener(“click” event => {
event.preventDefault();
lassen Sie target = document.querySelector(event.Ziel.hash);
Ziel.scrollIntoView({
Verhalten: “smooth”,
block: “start”
});
});
});

Das unterstützt in Chrome und Firefox, aber nicht Edge oder Safari.

Dann trat Sie zu mir, CSS kann dies tun! Es ist ein scroll-Verhalten Eigentum und Sie können es auf dem Dokument, um alles schriftrolle, die Art und Weise:

html – {
scroll-Verhalten: glatt;
}

Da unser Navigations – <a> – links sind hash/springen/Anker-links, das ist buchstäblich alles, was wir brauchen. Vergessen Sie die JavaScript. Vor allem, weil die browser-Unterstützung für scroll-Verhalten ist das gleiche wie die “glatte” version .scrollIntoView().

Aktiv

Dies ist ein bisschen schwieriger, vor allem, weil dies ist ein single-page-app scrollen statt einzelne Seiten mit Ihrer eigenen separaten Dokumenten. Wenn Sie unterschiedliche Dokumente, die wir ändern möchten eine aktive Klasse, die irgendwo in der navigation oder verwenden Sie einen Körper.specific_page Klasse oder so etwas.

Stattdessen müssen wir Blick auf die scroll-position der Seite, entscheiden Sie, welcher Abschnitt in der Ansicht und markieren Sie es auf diese Weise. Es könnte einige irgendwie Lust IntersectionObserver Weg, damit umzugehen, aber ich konnte nicht ganz wickeln Sie meinen Kopf herum, also statt ich bin gerade auf der Suche auf alle relevanten Abschnitte, dabei ein wenig mess-und Mathematik, und zu entscheiden, ob der link aktiv ist, die Art und Weise.

lassen Sie mainNavLinks = document.querySelectorAll(“nav ul li a”);
lassen Sie mainSections = document.querySelectorAll(“Hauptteil”);

lassen Sie lastId;
lassen Sie cur = [];

Fenster.addEventListener(“scroll”, event => {
lassen Sie fromTop = Fenster.scrollY;

mainNavLinks.forEach(link => {
lassen Abschnitt = document.querySelector(link.hash);

wenn (
Abschnitt.offsetTop <= fromTop &&
Abschnitt.offsetTop + Bereich.offsetHeight > fromTop
) {
link.classList.add(“current”);
} else {
link.classList.entfernen(“current”);
}
});
});

Das scroll-handler auslösen sollte, eine kleine Warnung Flagge. Das ist die Art von Sache, die Sie sollten wahrscheinlich gedrosselt werden, wie wenn Sie lodash zur Verfügung:

Fenster.addEventListener(“scroll”, () => {
_.Drossel(doThatStuff, 100);
});

Ich wollte nur nicht, das hier tun zu halten die demo-Abhängigkeit-frei.

Oh! Und es weitgehend funktioniert gut auf mobile (iOS hier):

Eine Kostenlose Vorlage für JavaScript-Bibliothek Homepages

Ich habe alle diese Sachen in dieser Vorlage habe ich auf, du bist frei für was auch immer.

SHARE
Previous articleLangsame Websites
Next articleTrage Websites