Klistrende posisjonering med ingenting annet enn CSS

Stikkelementer, når brukeren ruller til et bestemt punkt, har blitt et vanlig mønster i moderne webdesign. Du får se det brukes til toppnavigasjon, sidebjelken, dele koblinger eller kanskje annonser. beholder synlighet i visningsporten mens brukeren ruller. 

Historisk har vi trengte JavaScript for å gjøre dette. Imidlertid er klistret oppførsel foreslått (og utarbeidet) som en ny standard (the klissete posisjon), slik at vi kan oppnå effekten med ren CSS. La oss se på hvordan det fungerer!

Klebrig posisjon

klissete er en ny verdi for stilling eiendom, lagt til som en del av CSS3 Layout Module Spec. Det fungerer på samme måte som slektning posisjonering, fordi den ikke fjerner noe fra dokumentflyten. Med andre ord har et klebrig element ingen effekt på plasseringen av tilstøtende elementer og kollapser ikke dets foreldreelement.

Gitt følgende eksempel, satte vi inn #sidebar posisjon til klissete sammen med topp: 10px. Den høyeste verdien er nødvendig, og angir avstanden fra toppkanten av visningsporten der elementet vil pinne. 

#sidebar posisjon: -webkit-klebrig; // kreves for Safari-stilling: klebrig topp: 0; // nødvendig også.  

Nå, når vi ruller på siden, når sidebjelkens avstand fra toppen av visningsporten når 0, Sidebjørnet skal holde fast, og gir oss en fast stilling. Med andre ord, klissete er litt av en hybrid mellom slektning og faststilling.

nesting

I tillegg er det klissete posisjonen vil fungere innenfor en rulleboks eller et overfylt element. Denne gangen setter vi inn topp til 15px å gi litt mer plass over sidelinjen når den er stickily posisjonert (ja det er et ord).

Sidebjelken vil forbli klissete langs hele foreldrenes høyde (dvs. når bunnen av foreldrene når bunnen av sidefeltet, vil den "skyve" den av siden en gang til.)

Lett, er det ikke?

Brukerstøtte

Hvis du ser på disse demoene i Chrome, Opera eller Internet Explorer (og Blink), har du nå forstått at de ikke fungerer. Disse nettleserne støtter ennå ikke klissete verdi.

CSS Sticky posisjon nettleser støtte

I Chrome 28, da det ble byttet til Blink-motor, bestemte Chrome seg for å fjerne klissete posisjon fra kodebase, og det fjernet til og med muligheten for å aktivere den gjennom chrome: // flags side. Årsaken er:

"Den nåværende implementeringen av stillingen klebrig i Blink integreres ikke korrekt med komposisjon eller rulling. Vi ønsker til slutt å implementere stillingen klebrig, men den nåværende implementeringen gjør jobben for å forbedre rullingen og sammensetningen. Når rulling og sammensetning er i bedre form, kan vi re-introdusere stillingen klebrig på en måte som integreres riktig med resten av systemet.

Når alternativet er å søke a polyfill å simulere effekten i ikke-støttende nettlesere.

Bruk av Polyfill

For å hjelpe våre ikke-støttende nettlesere skal vi bruke stikkfeil utviklet av Oleg Korsunsky. Polyfill fungerer fint under ulike forhold. Om det utpekte elementet har polstring, marginer, grenser, blitt flatt eller dannet med relative enheter som em og prosentvis vil polyfillet nøyaktig etterligne CSS klissete stillingsadferd. Og bruk av stikkfeil er like intuitiv.

For å begynne, ta tak i stickyfill.js (valgfritt med jQuery, hvis du er mer kjent med og foretrekker å bruke jQuery for å velge elementer). Koble disse bibliotekene i HTML-dokumentet ditt. Deretter initierer stikkfugl med det utpekte elementet, som følger:

var sidebar = document.getElementById ('sidebar'); Stickyfill.add (sidefelt); 

Hvis du bruker jQuery, kan du skrive følgende i stedet:

. $ ( '# Sidebar') Stickyfill (); 

Nå skal vår klissete sidebar fungere på tvers av nettlesere, inkludert Chrome og Opera. Polyfileten er smart nok til at den bare vil kjøre i ikke-støttende nettlesere, ellers vil den bli helt deaktivert, og legge til side for nettleserens opprinnelige implementering.

Advarsler

Det er et par andre ting å merke seg før du tar sjansen og bruker klissete posisjon på nettstedene dine:

• Først bør høyden på foreldrebeholderen være større enn klistret.
• Mens Safari nativt støtter CSS-klebrig posisjon (om enn prefikset), vil den ikke tre i kraft når den klebrige posisjonen brukes under et element med CSS skjerm: bord;. Dette er en feil.
• Polyfillet har sine egne mangler, ved at det ikke vil fungere i en overfylt boks.
• På tidspunktet for skriving er det ingen JavaScript-hendelseshåndterer for klebrig å identifisere når elementet er sittende fast. For en begivenhet kan være nyttig for eksempel å legge til flere klasser når elementet er stiftet (det kan ikke være et ord).

Avsluttende tanker

CSS klebrig posisjon kan være et glimrende verktøy hvis du bare trenger et vanlig klistrende element. Hvis behovet ditt vokser utover det skjønt, si at du vil legge til noen fancy effekter på det klissete elementet, vil du fortsatt være bedre å velge et JavaScript-bibliotek som Waypoints.js med sin klebrig modul.

Ikke desto mindre håper vi å se noen store forbedringer på CSS klebrig, med hensyn til dens evne, samt nettleserstøtte, veldig snart.

Ytterligere referanser

• Hvorfor (Sticky) JS er ikke ideell?
• CSS Sticky Working Draft
• Rask Tips: Klistreløs Navigasjon, Uten Ujevn Hopp av Adi Purdila

Lær CSS: The Complete Guide

Vi har bygget en komplett guide for å hjelpe deg med å lære CSS, enten du er bare i gang med det grunnleggende eller du vil utforske mer avansert CSS.