Styling Basert på Bla Posisjon

0
24

Rik Schennink dokumenter et system for å være i stand til å skrive CSS-velgere som stil en side når den har rullet til et visst punkt. Hvis du er som meg, du er allerede på utkikk etter dokumentet.addEventListener(‘bla’ … og blir livredd om ytelse. Rik blir til at høyre unna med både debouncing funksjonen, så vel som markerer hendelsen som passive.

Sluttresultatet er en data-bla-attributtet i <html> – element som kan brukes i CSS. Det betyr at hvis du er rullet til 640 ned på siden, du har <html-data-bla=”640″> og kunne skrive en velger som:

html:ikke([data-bla=’0′]) {
body {
padding-top: 3em;
}
header {
stilling: fast;
}
}

Se Penn
Å skrive Dumme JS 🧟♂️ og Smart CSS 👩🔬 av Rik Schennink (@rikschennink)
på CodePen.

Dessverre, vi har ikke større enn ( > ), mindre enn (<) velgere i CSS for ting som nummererte attributter, slik CSS styling potensialet er ganske begrenset her. Du kan til syvende og sist må oppdatere JavaScript-funksjon slik at det gjelder andre klasser eller data attributter basert på matematikk. Men vil du allerede være satt opp for gode resultater her.

“Bruke maler når brukeren har rullet bort fra toppen” er en legit use case. Det får meg til å tenke på en en-gang-funksjon (som vi har i jQuery) hvor bla tilfelle ville bare utløses én gang, og deretter ikke igjen. De rullet! Så, per definisjon, de er ikke på topp lenger! Men det betyr ikke forholde seg til når de rulle tilbake til toppen.

Jeg synes det generelt er mer nyttig å bruke IntersectionObserver for styling ting basert på bla posisjon. Med det, kan du gjøre ting som “har dette elementet blitt rullet inn i visningen eller utover,” som er generelt nyttige, og kan brukes til bla gjennom-bort-fra-top ting også.

Her er et eksempel som legger til eller fjerner en klasse hvis en bruker har rullet forbi en skjult pixel plassert på 500px ned på siden.

Se Penn
Faste Overskrift med IntersectionObserver av Chris Coyier (@chriscoyier)
på CodePen.

Det er effektivt, så vel, for å unngå bla event handlers på alle.

Og når vi snakker om IntersectionObserver, sjekk ut “Tillit er Bra, Observasjon er Bedre—Skjæringspunktet Observatør v2”.