Seneste forumindlæg
Køb / Salg
 * Uofficiel Black/White liste V3
Login / opret bruger

Forum \ Programmering og webdesign \ Hjemmeside design
Denne tråd er over 6 måneder gammel

Er du sikker på, at du har noget relevant at tilføje?

jQuery - hjælp mig med at forstå logikken i denne ...

Af Supporter Chri.s | 12-08-2016 23:22 | 2114 visninger | 9 svar, hop til seneste
Hej folkens Jeg har fundet denne kode, og som jeg også selv bruger, men jeg har sgu svært ved at forstå logikken. Linket til pågældende kode: http://jsfiddle.net[...] Formålet med scriptet er at et element scroller med vinduet (position:fixed) indtil et vist punkt; og det virker også kanon. Det jeg ikke helt forstår er, hvorfor overgangen kunne bliver "fired" én gang, når man netop overskrider dette punkt. Mit problem ligger specielt i at forstå logikken bag delen som hedder: "If(!thresholdCrossed...) {}; ". Her forstår jeg ikke hvorfor den lige netop er sat vil at være falsk. Håber der er nogen som kan forklare logikken for mig :) PS. meningen er også, af hvad jeg forstår, at thresholdCrossed-delen netop skal sikre, at funktioner kunne bliver udført den ene gang hvor man overskrider denne grænse. Her er selve koden/scriptet også lige: var windw = this; $.fn.followTo = function ( pos ) { var $this = this, $window = $(windw); $window.scroll(function(e){ if ($window.scrollTop() > pos) { $this.css({ position: 'absolute', top: pos }); } else { $this.css({ position: 'fixed', top: 0 }); } }); }; $('#f').followTo(250);
--
Sidst redigeret 12-08-2016 23:24
#1
Daeko
Ny på siden
12-08-2016 23:33

Rapporter til Admin
Hvor er "If(!thresholdCrossed...) {};" i din kode? if ($window.scrollTop() > pos) er det den du mener? Der bliver tjekket når der scrolles hvor #f skal være. Det tjek laves hver gang du scroller. Eller misforstår jeg noget?
--
Sidst redigeret 12-08-2016 23:34
#2
Chri.s
Supporter
12-08-2016 23:39

Rapporter til Admin
#1 du har ret, jeg har sgu været for hurtigt til at copy-paste det ind samt link - jeg finder det lige! Min fejl :)
--
#3
Chri.s
Supporter
13-08-2016 00:15

Rapporter til Admin
Her er den rigtige kode (nedenfor). Kan se at årsagen til at jeg skrev den første er, at jeg vist har blandet disse to scripts sammen, og lavet en lidt anden udgave ;) Hvorom alting er, så bør nedenstående vise hvad jeg er ude efter med thresholdCrossed-delen :) var thresholdCrossed = false;$('#content').scroll(function () { var scroll = $('#content').scrollTop(); var threshold = 200; if (scroll > threshold && !thresholdCrossed) { var controls = $(".controls").clone(); $(".controls").remove(); $('#header').append(controls); } else if (scroll <= threshold && thresholdCrossed) { var controls = $(".controls").clone(); $(".controls").remove(); $('.banner').append(controls); } thresholdCrossed = scroll > threshold;});
--
#4
niels306
Bruger
13-08-2016 00:30

Rapporter til Admin
#3 gør alle en tjeneste at paste det på pastebin istedet for! det gør det så meget mere overskueligt og læsbart :-)
--
#5
LeCattez
Ultrabruger
13-08-2016 05:02

Rapporter til Admin
'thresholdCrossed' skifter imellem true/false alt efter hvad der står i din sidste linje (om det ene eller andet er større @sidste line - "thresholdCrossed = scroll > threshold;"). Så alt efter om den er true eller false kommer den ikke ind / ind i if sætningen.
--
Sidst redigeret 13-08-2016 05:03
#6
Chri.s
Supporter
13-08-2016 11:31

Rapporter til Admin
#4 værsgo ;) https://jsfiddle.net[...]
--
#7
Chri.s
Supporter
13-08-2016 22:41

Rapporter til Admin
#5 Ja det her jeg godt forstået ;) Det jeg ikke forstår er hvorfor den står i "if" sætningen som om at den skal være falsk, samt at scroll > threshold - hvis variablen threshold er falsk, så er scroll vel netop mindre end threshold? Derudover så forstår jeg ikke mekanismen som gør, at "if" sætningen kun returneres som "sand" én gang - nemlig det tidspunkt hvor den skifter til at scroll er større end threshold (scroll > threshold) - specielt fordi at den skal være falsk i "if" sætningen? :) Beklager at jeg ikke helt har fået forklaret det så godt fra start af :)
--
#8
Chri.s
Supporter
14-08-2016 00:31

Rapporter til Admin
Aha! Efter lang tids forundren så tror jeg rent faktisk at jeg har fundet logikken :) Da thresholdCrossed kun returnerer "sand" såfremt at scroll > threshold, så vil !threshold være "sand" såfremt at scroll < threshold. Dette forstod jeg egentligt godt før, men hvad jeg ikke havde tænkt over, var sekvensen at funktionerne blev udført, og dermed hvordan ! thresholdCrossed kunne være sand, samtidig med at scroll >= threshold. Da thresholdCrossed-variablen først opdateres efter at "if" betingelserne er tjekket er det dog muligt lige ved en enkelt pixel hvor "if" betingelsen kan være sand - nemlig ved scroll til px 200, inden at variablen er opdateret, hvorved ! thresholdCrossed er sand, samtidig med at scroll >= threshold er sand. Lyder det rigtigt?
--
#9
LeCattez
Ultrabruger
14-08-2016 13:50

Rapporter til Admin
#8 Det du kan gøre er at trykke F12 for dev tools og så når du er på din side, der kører koden, kan du se/åbne den under sources (ctrl + p) for at søge. Så kan du så finde din kode og sætte et break point (ude i venstre side) og derved se måden browseren køre din kode på (se hvilke variabler der er true/false osv.) Din kode køre fra top til bund, hvis den ikke kan komme ind i if-sætningen, så hopper den bare videre og køre det resterende kode. Til sidst bliver din variabel 'thresholdCrossed' sat til noget nyt (sker hver gang du scroller) og ud fra hvad den er sat til + om scroll/threshold er størst. Ud fra det bliver dine 'controls' flyttet mellem elementet '#header' og '.banner'. Nååh ja, "thresholdCrossed = scroll > threshold;", hvis scroll er større end threshold, så returnere den true og omvendt false. Husk at 'indent' din kode (brug 'tab' til at skubbe det ind) f.eks. inde i if-sætningerne, inde i en ny funktion osv. Gør det lettere at læse! :) Håber det gav svar på det du spurgte efter.
--
Sidst redigeret 14-08-2016 13:51

Opret svar til indlægget: jQuery - hjælp mig med at forstå logikken i denne ...

Grundet øget spam aktivitet fra gæstebrugere, er det desværre ikke længere muligt, at oprette svar som gæst.

Hvis du ønsker at deltage i debatten, skal du oprette en brugerprofil.

Opret bruger | Login
NYHEDSBREV
Afstemning