Klibbig positionering med ingenting annat än CSS

Stickningselement, när användaren rullar till en viss punkt, har blivit ett vanligt mönster i modern webbdesign. Du får se det tillämpas på toppnavigering, sidofältet, dela länkar eller kanske annonser. behåller synligheten inom visningsporten när användaren rullar. 

Historiskt har vi behövt JavaScript för att göra det här. Kladdigt beteende har dock föreslagits (och utarbetats) som en ny standard (the klibbig position), så att vi kan uppnå effekten med ren CSS. Låt oss ta en titt på hur det fungerar!

Klibbig position

klibbig är ett nytt värde för placera egenskap, läggs till som en del av CSS3 Layout Module Spec. Det verkar på samma sätt som släkting positionering, eftersom det inte tar bort något från dokumentflödet. Med andra ord har ett klibbigt element ingen effekt på placeringen av intilliggande element och faller inte in dess moderelement.

Med tanke på följande exempel ställer vi in #sidebar position till klibbig tillsammans med topp: 10px. Det högsta värdet krävs och anger avståndet från den övre kanten av visningsporten där elementet kommer pinne. 

#sidebar position: -webkit-sticky; // krävs för Safari position: klibbig; topp: 0; // krävs också.  

Nu, när vi rullar på sidan, når sidofältets avstånd från toppen av visningsporten når 0, sidofältet ska hålla sig, vilket ger oss en fast placera. Med andra ord, klibbig är typ av hybrid mellan släkting och fastplacera.

Nesting

Dessutom klibbig positionen kommer att fungera inom en rullbox eller ett överflödigt element. Den här gången ställer vi in topp till 15px för att ge lite mer utrymme ovanför sidofältet när det är kladdigt placerad (ja det är ett ord).

Sidofältet kommer att förbli klibbigt längs med förälderns höjd (dvs: när förälderns botten når längst ned på sidofältet, kommer den att "trycka" den av sidan en gång till.)

Lätt, är det inte?

Stöd

Om du tittar på dessa demos i Chrome, Opera eller Internet Explorer (och Blink), har du nu insett att de inte fungerar. Dessa webbläsare stöder ännu inte klibbig värde.

CSS Sticky position browser support

I Chrome 28 beslutade Chrome att ta bort klibbig position från sin kodbas, och det tog bort möjligheten att aktivera den genom chrome: // flags sida. Anledningen är:

"Den nuvarande implementeringen av positionen klibbig i Blink integreras inte korrekt med komposit eller rullning. Vi vill så småningom genomföra positionen kladdig, men det nuvarande genomförandet får sätt att arbeta för att förbättra rullning och sammansättning. När en gång rullning och sammansättning är i bättre form kan vi introducera positionen klibbigt på ett sätt som integreras korrekt med resten av systemet.

När alternativet är att tillämpa a polyfill för att simulera effekten i icke-stödjande webbläsare.

Använda Polyfill

För att hjälpa våra icke-stödjande webbläsare använder vi stickfill som utvecklats av Oleg Korsunsky. Polyfillen fungerar fint under olika omständigheter. Huruvida det utpekade elementet har vadderingar, marginaler, gränser, floats eller formats med relativa enheter som em och procentsatsen, kommer polyfilen att efterlikna exakt CSS klibbig position beteende. Och med stickfill är lika intuitiv.

För att börja, ta tag i stickyfill.js (valfritt med jQuery, om du är mer bekant med och föredrar att använda jQuery för att välja element). Länka dessa bibliotek i ditt HTML-dokument. Starta sedan stickfisk med det utpekade elementet enligt följande:

var sidebar = document.getElementById ("sidebar"); Stickyfill.add (sidofältet); 

Om du använder jQuery kan du skriva följande istället:

. $ ( '# Sidebar) Stickyfill (); 

Nu borde vår klibbiga sidopanel fungera över webbläsare, inklusive Chrome och Opera. Polyfilen är smart nog att den bara kommer att köras i icke-stödjande webbläsare, annars kommer den att vara helt inaktiverad, åt sidan för webbläsarens inbyggda implementering.

förbehåll

Det finns ett par andra saker att notera innan du tar steget och använder klibbig position på dina webbplatser:

• För det första bör höjden på förälderbehållaren vara större än det klibbiga elementet.
• Även om Safari stödjer CSS-klibbigt läge (om än prefixat), kommer det inte att träda i kraft när den klibbiga positionen används under ett element med CSS display: bord;. Det här är en bugg.
• Polyfillen har sina egna brister, eftersom den inte kommer att fungera inom en överflödig låda.
• I skrivande stund finns det ingen JavaScript-händelsehanterare för klibbig att identifiera när elementet är fastnat. Vilken händelse kan vara användbart, till exempel, att lägga till ytterligare klasser när elementet klibbas (det kan inte vara ett ord).

Slutsatser

CSS klibbig position kan vara ett utmärkt verktyg om du bara behöver ett vanligt klibbigt element. Om ditt behov växer bortom det, säger du att du vill lägga till några fina effekter på det klibbiga elementet, blir det fortfarande bättre att välja ett JavaScript-bibliotek som Waypoints.js med sin klibbiga modul.

Ändå hoppas vi kunna se några större förbättringar av CSS-klibbiga, med tanke på dess kapacitet samt webbläsarstöd, väldigt snart.

Ytterligare referenser

• Varför (Sticky) JS är inte idealisk?
• CSS Sticky Working Draft
• Snabbtips: Klibbig navigering, utan den otroliga höjden av Adi Purdila

Lär CSS: Den kompletta guiden

Vi har byggt en komplett guide för att hjälpa dig att lära dig CSS, oavsett om du bara har börjat med grunderna eller vill utforska mer avancerad CSS.