Klibbiga, Smidig, Aktiv Nav

0
37

Precis som titeln säger! Här är en sidebar navigation bar som…

  1. Använder klibbiga positionering. Den visas på skärmen när den kan, men kommer inte överlappar sidhuvud, sidfot, eller någonsin kommer att göra något av det länkar otillgängliga.
  2. Rullar smidigt till de avsnitt du klicka på till.
  3. Aktiverar den nuvarande nav baserat på bläddra position (det är en enda sida sak).

Se Pennan Klibbiga, Smidig, Aktiv Nav av Chris Coyier (@chriscoyier) på CodePen.

Sticky

Det är lätt att slänga position: klibbiga; top: 0; på något. Men för att det ska fungera, det måste vara inom en längre överordnade elementet. Så, oordnad lista (<ul>) inom navigation (<nav>) fungerar bra här. Tack vare CSS-grid layout, <nav> är lika lång som den <main> innehållsområdet. Observera dock att vi också måste position: -webkit-klibbig, för iOS.

Jag även slängt i ett magiskt nummer för den vertikala media query så att den inte fastnar på ett sådant sätt att du inte kan komma till den lägre navigering:

/* Fastnar bara om du kan passform */
@media (min-height: 300px) {
nav ul {
position: klibbiga;
top: 0;
}
}

Smidig

I min första spricka på detta, tänkte jag om JavaScript-baserade mjuk rullning. Det är även infödda dessa dagar utan att du behöver ramar. Du kan rikta ett element och smidigt bläddra till det:

dokumentet.querySelector(‘.hej”).scrollIntoView({
beteende: ‘jämn’
});

Att det till en godtycklig uppsättning av nav…

låt mainNavLinks = dokument.querySelectorAll(“nav ul li a”);

mainNavLinks.forEach(länk => {
länk.addEventListener(“click”, event => {
händelsen.preventDefault();
låt target = dokument.querySelector(händelse.- målet.hash);
– målet.scrollIntoView({
beteende: “smidig”,
blockera: “start”
});
});
});

Som stöds i både Chrome och Firefox, men inte Kant eller Safari.

Då slog det mig, CSS kan göra detta! Det är en scroll-beteende egendom och du kan lägga det på dokumentet för att få allt att rulla på det sättet:

html {
bläddra beteende: smidig;
}

Eftersom vår navigering <a> länkar är hash/hoppa/ankare-länkar, det är bokstavligt talat allt vi behöver. Glöm JavaScript. Särskilt eftersom webbläsaren stöd för att bläddra beteende är samma som “smidig” – version .scrollIntoView().

Aktiv

Detta är lite svårare, särskilt eftersom detta är en sida rullning app snarare än enskilda sidor med sina egna separata dokument. Om de vore separata dokument, vi skulle ändra en aktiv klass någonstans i navigation eller använda en kropp.specific_page klass eller något.

Istället, vi kommer att behöva titta på bläddra position på sidan, bestämmer vilken sektion som är i visa och markera det på det sättet. Det kan vara några ganska snygga IntersectionObserver sätt att hantera detta, men jag kunde inte riktigt svepa huvudet runt det, så istället är jag bara titta på alla relevanta sektioner, för att göra en liten mätning och matematik, och bestämmer om länken är aktiv på det sättet.

låt mainNavLinks = dokument.querySelectorAll(“nav ul li a”);
låt mainSections = dokument.querySelectorAll(“main-sektionen”);

låt lastId;
låt cur = [];

fönster.addEventListener(“bläddra”, event => {
låt fromTop = fönster.scrollY;

mainNavLinks.forEach(länk => {
låt avsnitt = dokument.querySelector(länken.hash);

if (
avsnitt.offsetTop <= fromTop &&
avsnitt.offsetTop – + – avsnitt.offsetHeight > fromTop
) {
länk.classList.lägga till(“aktuellt”);
} else {
länk.classList.ta bort(“aktuellt”);
}
});
});

Bläddra handler det bör utlösa en liten varning flaggan. Det är den typ av sak som bör nog ändras, till exempel om du har lodash tillgängliga:

fönster.addEventListener(“bläddra”, () => {
_.gas(doThatStuff, 100);
});

Jag bara inte göra det här för att hålla demo beroende-fri.

Åh! Och det i stort sett fungerar bra på mobila (iOS här):

En Gratis Mall för JavaScript-Bibliotek Hemsidor

Jag använde allt det här i den här mallen jag gjorde som du är fri att använda till vad.

SHARE
Previous articleLångsamma Hemsidor
Next articleSlow Websites