, fokus: begrænset klæbere med jquery,,,,, andel,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, hver anden uge tager vi et meget fokuseret og se på en interessant og nyttig effekt, stik af, hack, bibliotek eller endog et smart teknologi.vi vil derefter forsøge at enten dekonstruere kode eller skabe en sjov lille projekt med det.i dag skal vi se på et stik af, som gennemfører et flot virkning. det er svært at forklare i en sætning, så du kan lige så godt klik på den knap til at starte fortsat efter springet.,,,, et ord fra forfatteren, som web - udviklere, vi har adgang til en svimlende mængde af præ - byggede kode, det være sig et lille klip eller en fuldt udviklet rammer.medmindre du gør noget meget specifikt, er chancen, er der allerede noget prebuilt for dig at gearing.desværre er mange af disse fremragende tilbud sygner hen i anonymitet, specielt til de ikke - alvorlige publikum. denne serie søger at rette op på dette område ved at indføre en virkelig velskrevet, bruges kode... er det et stik af, virkning eller en teknologi til læseren.yderligere, hvis den er lille nok, vil vi forsøge at dekonstruere kode og forstå, hvordan den gør det voodoo.hvis det er noget større, vil vi forsøge at skabe et mini - projekt med at lære reb og forhåbentlig forstår, hvordan gør brug af det i den virkelige verden.,, om stickyfloat, her er nogle hurtige info:,, type:, stik af,, teknologi, javascript [byggede på jquery bibliotek], funktion: flydende indhold kun inden for begrænser på modervirksomhedens grænser, stik af hjemmeside: her er problemet, og i mange tilfælde, - har brug for indholdet til flydende som du rulle, men kun i dets moderselskab,.,, flydende indhold, som bruger ruller gennem resten af side er barneleg.nej javascript er nødvendigt, - - du kan gøre det, med bare en gammel ccs.slå en holdning: faste, erklæring om det og... bang!du har en beholder, der er fastsat i en særlig placering i side - det er flydende i side til at være mere almindelige.men lad os se det i øjnene, det virker ikke med alle layout.du kunne planlægge lidt videre og holdning, der på den side, så det ville aldrig forstyrre vigtige elementer, men det ville hverken være fuldstændig idiotsikker eller genbruges andetsteds uden omfattende ændringer. i disse tilfælde skal indholdet være flydende, som du ved, men kun i moderselskabet.,.hvis du undrer dig over, ja, denne funktion er en variant af en andrew viste dig i sidste uge, hvor er resten, hvordan jeg fik at vide, om denne stik af. som de vil finde i internettets udvikling, som multivariable matematik, er der ofte en række løsninger på konkrete problemer.lad os se på en af de alternative løsninger.,, en tilsidesættelse af logik, den generelle logik eller gennemgang af stikket er faktisk ret enkelt.lad mig vise dig det.husk på, at jeg skal henvise til det element, der skal være fremsat, som, klistrede, fra nu af, men før vi begynder, kommer der en hurtig prøve at vise hierarki:,, hele logikken i den stik af kan blive udvandet:,, beregnes den nuværende holdning til den klæbende element er moderselskab i forhold til dokumentet.mærket som 1 i billedet.,, opnå modervirksomhedens højde, - - så vil vi vide, hvornår man skal stoppe flydende, når vi er forbi den forælder.mærket som 2, beregner, hvor langt den side har været scrolled ned, - - for at finde ud af, om vi ser på den forælder, - - for at se, om vi er inden for rækkevidde.i billedet ovenfor, den horisontale linje er hypotetisk toppen af den nuværende viewport.i dette tilfælde er denne værdi er afstanden mellem de to punkter markeret som 3.ved hjælp af de to værdier, vi har som beregnet ovenfor, kan vi meget hurtigt finde ud af, om den klæbende skal være placeret korrekt.,, hvis du er forvirret, det skal du ikke være.for eksempel, lad os se på en prøve nummer:,, klistrede er forælder er, 10px, fra toppen af side. den forælder, 100px, høj. den side har været scrolled, 50px i et scenario, 150px, i den anden.,, så på grundlag af denne oplysninger, der er nævnt ovenfor, kan man udlede, at i scenarie 1 - klæbende bør re flød på passende vis.hvorfor?den side er blevet scrolled 10px fra toppen... 10 kommer fra den side af sig selv, mens resten stammer fra den klæbende er forælder.den forælder er synlig i de vigtigste viewport.,, i scenario 2, - den klæbende kan være alene.i 150px, 10 kommer fra den side, 100 fra den oprindelige element, og resten er taget op af resten af side er element.dette indebærer, at brugeren har scrolled tidligere moderselskab, og vi behøver ikke at gøre noget, hvis du stadig er uklart på dette punkt, så fortvivl ikke.jeg forklarer lidt mere tid at gå igennem den kilde, en tilsidesættelse af kilde, kilde, uden kommentarer, er kun en smule over 30 linjer.som altid, vi går igennem den kode, og forklare, hvad hver linje. her er kilden til deres henvisning. $. fn.stickyfloat = funktion (muligheder, lockbottom) {var $mål =, var parentpaddingtop = parseint ($i mål nr. parent(). css ('padding-top ') var startoffset = - mål nr. parent(). offset(). top, var vælger = $. udvide ((startoffset: startoffset, offsety: parentpaddingtop, varighed: 200, lockbottom: sande}, optioner), $mål css ({holdning: "absolut'}); hvis (vælger. lockbottom) (var - bottompos = $mål. parent(). height() - mål. height() + parentpaddingtop; hvis (bottompos < 0) bottompos = 0} $(vindue). skriftrulle (funktion () ($i mål nr. stop(), var paststartoffset = $(nummer). scrolltop() > vælger. startoffset, var objfartherthantoppos = $i mål nr. offset(). top > startoffset, var objbiggerthanwindow = $i mål nr. outerheight() < $(vindue). height(); hvis ((paststartoffset