Kleverig, Glad, Actieve Nav

0
38

Net zoals de titel al zegt! Hier is een sidebar navigatie bar die…

  1. Maakt gebruik van sticky positionering. Het blijft op het scherm wanneer het kan, maar niet overlapt de koptekst, voettekst, of ooit een van de links toegankelijk is.
  2. Schuift soepel naar de secties u op.
  3. Activeert de huidige nav gebaseerd op scroll-positie (het is een enkele pagina ding).

Zie de Pen Kleverig, Glad, Actieve Nav van Chris Coyier (@chriscoyier) op CodePen.

Sticky

Het is gemakkelijk om te gooien position: sticky; top: 0; op iets. Maar voor het werk, het moet binnen een groter bovenliggende element. Dus, de ongeordende lijst (<ul>) in de navigatie (<nav>) werkt prima hier. Dankzij de CSS grid lay-out, <nav> is zo groot als de <main> inhoudsgebied. Houd er echter rekening mee dat we ook moet de positie: -webkit-sticky; voor iOS.

Ik heb ook geworpen in een magisch nummer voor de verticale media query zodat deze niet blijft plakken op een manier die je niet kunt krijgen aan de onderste navigatie-items:

/* Alleen vasthouden als u passen */
@media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}

Glad

In mijn eerste crack op dit, ik dacht op basis van JavaScript vloeiend schuiven. Het is zelfs de native deze dagen met geen behoefte aan kaders. Je kunt richten op een element en soepel gaat u naar:

document.querySelector(‘.hallo’).scrollIntoView({
gedrag: ‘gladde’
});

Je brengt het naar een willekeurige set van nav…

laat mainNavLinks = document.querySelectorAll(“nav ul li a’);

mainNavLinks.forEach(link => {
de link.addEventListener(“klik” event => {
evenement.preventDefault();
laat target = document.querySelector(event.doel.hash);
doel.scrollIntoView({
gedrag: “glad”,
blok: “start”
});
});
});

Dat wordt ondersteund in zowel Chrome en Firefox, maar niet van de Rand of Safari.

Daarna bedacht ik me, CSS kan dit doen! Er is een scroll-gedrag eigendom en u kunt hem op het document om alles schuiven op die manier:

html {
scroll-gedrag: glad;
}

Sinds onze navigatie <a> links worden hash/springen/anker links, dat is letterlijk alles wat we nodig hebben. Vergeet de JavaScript. Vooral omdat de browser ondersteuning voor scroll-gedrag is hetzelfde als de “gladde” versie van .scrollIntoView().

Actief

Dit is een beetje lastiger, vooral omdat dit een één-pagina scrollen app in plaats van individuele pagina ‘ s met hun eigen aparte documenten. Als ze waren aparte documenten, zouden we het veranderen van een actieve klasse ergens in de navigatie of gebruik een lichaam.specific_page klasse of iets.

In plaats daarvan zullen we moeten kijken naar de schuifpositie van de pagina, beslissen welke sectie is in zicht en mark het op die manier. Misschien is er een beetje zin in IntersectionObserver manier om dit te verwerken, maar ik kon niet goed mijn hoofd wikkel omheen, dus in plaats daarvan ben ik gewoon te kijken naar alle relevante onderdelen, het doen van een beetje meten en wiskunde, en de beslissing of de link actief is, op die manier.

laat mainNavLinks = document.querySelectorAll(“nav ul li a’);
laat mainSections = document.querySelectorAll(“main-sectie”);

laat lastId;
laat cur = [];

venster.addEventListener(“scroll”, event => {
laat fromTop = venster.scrollY;

mainNavLinks.forEach(link => {
laat section = document.querySelector(link.hash);

if (
sectie.offsetTop <= fromTop &&
sectie.offsetTop + sectie.offsetHeight > fromTop
) {
de link.classList.toevoegen(“current”);
} else {
de link.classList.verwijderen(“current”);
}
});
});

De scroll-handler er moet leiden tot een kleine waarschuwing vlag. Dat is het soort ding dat moet waarschijnlijk worden gesmoord, zoals wanneer u lodash beschikbaar:

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

Ik wilde gewoon niet dat het hier om de demo-afhankelijkheid-gratis.

Oh! En het grotendeels goed werkt op mobiele apparaten (iOS):

Een Gratis Sjabloon voor JavaScript-Bibliotheek Homepages

Ik gebruikte al deze dingen in deze template heb ik gemaakt die u bent vrij om te gebruiken voor wat dan ook.