Share
Hver annen uke tar vi et ultrafokusert utseende på en interessant og nyttig effekt, plugin, hack, bibliotek eller til og med en grei teknologi. Vi forsøker da å dekonstruere koden eller lage et morsomt lite prosjekt med det.
I dag skal vi ta en titt på et plugin som utfører en ganske fin effekt - det er ganske vanskelig å forklare i en setning, så du kan også klikke på fortsett-knappen for å komme i gang etter hoppet.
Som webutviklere har vi tilgang til en svimlende mengde forhåndsbygget kode, enten det er et lite stykke eller et fullverdig rammeverk. Med mindre du gjør noe utrolig spesifikt, er det sjansene, det er allerede noe prebuilt for deg å utnytte. Dessverre slår mange av disse stjernene i anonymitet, spesielt til de ikke-hardcore publikum.
Denne serien søker å rette opp dette problemet ved å introdusere noen virkelig godt skrevet, nyttig kode - det være seg en plugin, effekt eller en teknologi til leseren. Videre, hvis det er lite nok, forsøker vi å dekonstruere koden og forstå hvordan den gjør det voodoo. Hvis det er mye større, vil vi forsøke å lage et mini-prosjekt med det for å lære tauene og forhåpentligvis forstå hvordan gjøre bruk av det i den virkelige verden.
Her er litt rask info:
I mange tilfeller trenger du innholdet til å flyte mens du ruller, men bare innenfor sin forelder.
Flytende innhold som en bruker ruller gjennom resten av siden er barnas spill. Ingen JavaScript er nødvendig - du kan gjøre det med bare vanlig gammel CSS. Slap a posisjon: fast erklæring på det og boom !, du har en container som er festet på et bestemt sted på siden - det er flytende på siden for å være mer allsidig.
Men la oss innse det, det virker ikke med hver layout. Du kan planlegge litt fremover og plassere den på siden, slik at den aldri vil forstyrre viktige elementer, men det ville heller ikke være helt idiotsikkert eller gjenbrukbart andre steder uten store endringer.
I disse tilfellene trenger du innholdet til å flyte mens du ruller, men bare innenfor sin forelder.. Hvis du lurer på, ja, denne funksjonaliteten er en variasjon av den som Andrew viste deg i forrige ukes opplæringsprogram, slik er det jeg fikk vite om denne plugin-modulen.
Som du finner i webutvikling, mye som multivariabel kalkulator, finnes det ofte en rekke løsninger på et gitt problem. La oss se på en av de alternative løsningene.
Den generelle logikken eller arbeidsflyten i pluggen er faktisk ganske enkel. La meg vise deg. Husk at jeg skal referere til elementet som må flyte som klissete fra nå av.
Men før vi begynner, er det en rask mockup for å vise hierarkiet:
Hele logikken til plugin kan vannes ned til:
Hvis du er forvirret, ikke vær. For eksempel, la oss se på noen eksempler:
Så basert på denne informasjonen ovenfor, kan du avlede det
I scenario ett - den klissete bør reflottes på riktig måte. Hvorfor? Siden har blitt rullet 10px fra toppen - 10 kommer fra selve siden mens resten kommer fra klistret foreldre. Dermed er foreldrene synlige i hovedvisningen.
I scenario to - den klebrig kan stå alene. Av 150px kommer 10 fra siden, 100 fra overordnet elementet og resten tas opp av resten av sidens element. Dette innebærer at brukeren har rullet forbi forelderen og vi ikke trenger å gjøre noe.
Hvis du fortsatt er uklar på dette tidspunktet, ikke bekymre deg. Jeg vil forklare litt mer mens du går gjennom kilden.
Kilden fjernet av kommentarer er bare en smidgen over 30 linjer lang. Som alltid går vi gjennom koden og forklarer hva hver linje gjør.
Her er kilden, for din referanse.
Accentsconagua
$ .fn.stickyfloat = funksjon (alternativer, lockBottom) var $ obj = this; var parentPaddingTop = parseInt ($ obj.parent (). css ('padding-top')); var startOffset = $ obj.parent (). offset (). toppen; var opts = $ .extend (startOffset: startOffset, offsetY: parentPaddingTop, varighet: 200, lockBottom: true, alternativer); $ obj.css (posisjon: 'absolutt'); hvis (opts.lockBottom) var bottomPos = $ obj.parent (). høyde () - $ obj.height () + parentPaddingTop; hvis (bottomPos < 0 ) bottomPos = 0; $(window).scroll(function () $obj.stop(); var pastStartOffset = $(document).scrollTop() > opts.startOffset; var objFartherThanTopPos = $ obj.offset (). top> startOffset; var objBiggerThanWindow = $ obj.outerHeight () < $(window).height(); if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ) var newpos = ($(document).scrollTop() -startOffset + opts.offsetY ); if ( newpos > bottomPos) newpos = bottomPos; hvis ($ (dokument) .scrollTop () < opts.startOffset ) newpos = parentPaddingTop; $obj.animate( top: newpos , opts.duration ); ); ; Tid til å se hva det egentlig gjør. Jeg kommer til å anta at du har en ganske grunnleggende forståelse av JavaScript.
$ .fn.stickyfloat = funksjon (alternativer, lockBottom) ;
Trinn 1 - Den generiske omslaget for en jQuery-plugin. Som du sikkert vet, opsjoner er et objekt som inneholder forskjellige alternativer for å konfigurere oppførselen til plugin. lockBottom, Interessant, angir om funksjonaliteten vi ønsker er slått på eller ikke. Vi legger den på.
var $ obj = dette;
Steg 2 - Hold en referanse til elementet som er bestått. I denne sammenhengen, dette peker på DOM-elementet som samsvarer med väljeren du har passert inn. For eksempel, hvis du passerte inn #Meny, dette peker på elementet med den IDen.
var parentPaddingTop = parseInt ($ obj.parent (). css ('padding-top')); Trinn 3 - Dette er bare for å glatte ut effekten er foreldreelementet har en stor polstring. I så fall vil dette inkludere polstringen i beregningen.
var startOffset = $ obj.parent (). offset (). toppen;
Trinn 4 - Vi beregner forelderens stilling i forhold til dokumentet ved hjelp av offset jQuery-metoden. Vi jobber gjennom DOM ved hjelp av forelder metode. Vi $ obj siden vi allerede har cachet den klissete. Treffer dokumentasjonen til jQuery API hvis du ikke er kjent med disse metodene.
I så fall er avstanden fra toppen tilstrekkelig, så vi får den verdien alene.
var opts = $ .extend (startOffset: startOffset, offsetY: parentPaddingTop, varighet: 200, lockBottom: true, alternativer);
Trinn 5 - En ganske generisk del av jQuery plugin-utviklingsprosessen. Vi smelter hovedsakelig i de bestått alternativene sammen med noen forhåndsinnstillinger for å få et siste sett med alternativer som brukes i hele koden. Husk at de overførte parametrene alltid har forrang over standardverdiene.
$ obj.css (posisjon: 'absolutt');
Trinn 6 - Effekten i spørsmålet vil bli opprettet ved å manipulere elementets topp CSS-verdi, så vi vil bare fortsette og sette sin posisjon til absolutt hvis den ikke allerede er satt på den måten.
hvis (opts.lockBottom) var bottomPos = $ obj.parent (). høyde () - $ obj.height () + parentPaddingTop; hvis (bottomPos < 0 ) bottomPos = 0;
Trinn 7 - Som nevnt ovenfor, er lockBottom alternativet angir om effekten gjelder eller ikke. Hvis aktivert, kan vi begynne å beregne. Det vi beregner er cutoff-punktet utover som vi ikke ville trenge å reposisjonere den klissete.
Naturligvis kan du gå bare ved å beregne foreldrenes høyde, men effekten blir uraffinert. Du må ta hensyn til høyden på den klebrige seg selv langs noen paddings på foreldrene selv.
$ (vindu) .scroll (funksjon () // masse kode)
Trinn 8 - Vi hekker vår kode, inne i en anonym funksjon, til Windows ' bla begivenhet. Gitt, dette er ikke den mest effektive måten å fortsette, men vi vil ignorere den for nå.
$ Obj.stop ();
Trinn 9 - Første ordre av ordtaket er å stoppe alle løpende animasjoner på klebrig elementet. De Stoppe Metoden tar seg av dette.
var pastStartOffset = $ (dokument) .scrollTop ()> opts.startOffset; var objFartherThanTopPos = $ obj.offset (). top> startOffset; var objBiggerThanWindow = $ obj.outerHeight () < $(window).height();
Trinn 10 - Disse tre variablene har verdier som vi vil bruke litt senere.
pastStartOffset sjekker om vi har rullet forbi den øverste grensen til overordnet elementet. Husk at vi brukte offset metode for å finne ut mellomrummet mellom foreldreelementet og dokumentet. Vi oppnår hvor langt ned du har rullet ved hjelp av scrollTop metode. Dette er avstanden mellom toppen av dokumentet og toppen av gjeldende visningsport. objFartherThanTopPos sjekker om klistret er i det som er standardposisjon - øverst på sin overordnede. Hvis vi har rullet utover topp av foreldre, vi vil ikke ha det flytende utenfor.objBiggerThanWindow sjekker om totalhøyden til den klebrige er større enn størrelsen på vinduet. Hvis det er tilfelle, er det ikke noe poeng i å manipulere det klissete elementet. hvis ((pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow) // Mer kode
Trinn 11 - Det er her pluginet beregner om vi må manipulere det klissete elementet. Hva linjen ovenfor gjør det:
Vi fortsetter bare hvis både av disse forholdene er oppfylt.
var newpos = ($ (dokument) .scrollTop () -startOffset + opts.offsetY);
Trinn 12 - Denne linjen definerer en variabel, newpos, som spesifiserer stillingen som det klistrede elementet må animeres til. Som du kanskje har lagt merke til, er beregningen ganske grunnleggende hvis du husker bildet ovenfor. Finn ut den rullede avstanden, legg til forelderens topppolstring og endelig trekke avstanden mellom dokumentet og overordnet - utgangspunktet. Dette gir deg avstanden, i piksler, mellom toppen av overordnet elementet inn i det punktet der det klebrig skal plasseres.
hvis (newpos> bottomPos) newpos = bottomPos;
Trinn 13 - Hvis vi har rullet utover bunngrensen til overordnet elementet, trenger vi ikke å manipulere ting videre. Lås posisjonen der.
hvis ($ (dokument) .scrollTop () < opts.startOffset ) newpos = parentPaddingTop;
Trinn 14 - Hvis vi har rullet over den øverste grensen til foreldrene, må du holde den låst der, slik at den ikke beveger seg lenger opp.
$ obj.animate (top: newpos, opts.duration);
Trinn 15 - Ferdig! Vi animerer ganske enkelt det klissete elementet som passerer i det nødvendige topp verdi sammen med varigheten av effekten ved hjelp av animere jQuery-metoden.
Som du kanskje har antatt på dette punktet, er bruken som sådan:
$ ('# meny'). stickyfloat (varighet: 500);> I stedet for å forklare prøve-mini-prosjektet, som forrige gang, har jeg i stedet bestemt meg for å bare bygge den og gi deg koden.
Her er de relevante delene av demoen, resten er boilerplate:
Klebrig menyJeg ønsket å skrive noe utrolig, unabashedly vittig her. Jeg feilet. :(Ja, jeg følger deg overalt så lenge du er i min forelderDu ventet noe smart her, ikke sant? Jeg vet du gjorde det! Fess opp!
.seksjon polstring: 10px; bredde: 900px; margin: 0 auto; background-color: # F1F1F1; stilling: i forhold; .section .content høyde: 800px; background-color: #ddd; margin venstre: 250 px; tekst-Justering: center; color: # 333; font-size: 16px; .seksjon .meny posisjon: absolutt; venstre: 10px; bredde: 240 piksler; høyde: 100 piksler; bakgrunn: # 06C; tekst-Justering: center; farge: #fff; font-size: 14 piksler;
$ ('# meny'). stickyfloat (varighet: 400); $ ('# menu2'). stickyfloat (varighet: 400); Hvis du går gjennom filene som du leser denne artikkelen, bør det være ganske selvforklarende, men du er mer enn velkommen til å treffe meg spørsmål hvis noen er uklart.
Og vi er ferdige. Vi tok en titt på et utrolig nyttig plugin, gikk gjennom kildekoden og til slutt avsluttet ved å lage et mini-prosjekt med det.
Spørsmål? Hyggelige ting å si? Kritikk? Treff kommentar delen og la meg en kommentar. Takk så mye for å lese!
