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

Forum \ Programmering og webdesign \ Hjemmeside design

Javascript hvis tal er mellem en række i array

Af Super Supporter Chri.s | 14-11-2017 11:09 | 470 visninger | 14 svar, hop til seneste
Hej folkens Vil gerne lave en måde at vise hvilken sektion brugeren på en hjemmeside er scrollet til, og i den forbindelse finder jeg positionen for en række sektioner i et array - eksempelvis som nedenfor (bemærk at jeg bruger jQuery her, men metoden er egentlig ligegyldig): $(".section").each(){ var elementPosition = $(this).offset().top; }) Rettelse: kan se at ovenstående naturligvis ikke giver nedenstående array, men nedenstående array er "ønsket" :-) Herved har jeg nu et array, som eksempelvis kunne se ud således: 1 = 500, 2 = 1500, 3 = 2200 4 = 3100 Her kunne jeg godt tænke mig at tjekke om den nuværende "scroll-position" er inde imellem nogle af disse tal i arrayet, men da jeg ikke er særligt erfaren med arrays, er jeg ikke helt sikker på hvordan jeg skal gøre det. Det skal bemærkes at formålet er, at hvis scroll-position eksempelvis er == 1700, så skal der tilføjes en class til det punkt som angiver, at man nu er i 2. sektion. Dette kunne eksempelvis se således ud (der er ikke noget korrekt i nedenstående, men bare for at give en ide), uden at vide hvordan jeg helt lige kommer ind og identificerer hvor i "arrayet" man er: if(window.pageYOffset > elementPosition2){ $(".section2-status").css("background", "red"); }; Er der nogen, som har nogle gode ideer? :)
--
Sidst redigeret 14-11-2017 11:14
#1
Chri.s
Super Supporter
14-11-2017 11:17

Rapporter til Admin
PS. jeg glemte at sige/rette, at jeg ønsker ikke at genskabe array'et for hver gang der scrolles, og derfor skal denne funktion gerne adskilles fra selve "scroll" funktionen. Alternativt kunne arrayet laves for hvert scroll og nok gøre det noget lettere, men det vil også kræve en del beregninger for hver gang der scrolles.
--
#2
Programmøren
Gæst
14-11-2017 11:20

Rapporter til Admin
http://getbootstrap.com[...]
--
Gæstebruger, opret dit eget login og få din egen signatur.
#3
Chri.s
Super Supporter
14-11-2017 11:25

Rapporter til Admin
#2 ellers et godt bud, men jeg bruger desværre Bootstrap layouttet i dette tilfælde
--
#4
Programmøren
Gæst
14-11-2017 11:41

Rapporter til Admin
Hvis du virkelig insisterer kan du jo altid bare loope igennem, og så længe arrayet er sorteret (som du viser i did eksempel) kan du nøjes med at tjekke om du er over/under, afhængig af hvilken vej du looper. for (var i = 0; i < array.length; i++) { } eller for (var i = array.length - 1; i >= 0; i--) { }
--
Gæstebruger, opret dit eget login og få din egen signatur.
#5
Zerock
Elitebruger
14-11-2017 13:05

Rapporter til Admin
Her er et bud: https://pastebin.com[...] Dit positionArray kan du oprette, når du har lyst, f.eks. på window.onload eller andet tidspunkt, hvor din DOM er klart til beregning af position af elementer.
--
#6
Chri.s
Super Supporter
14-11-2017 14:33

Rapporter til Admin
Har rent faktisk fået lavet en løsning baseret på nogle idéer jeg fik fra #4, men din løsning i #5 ser også meget spændende ud! Kunne du eventuelt have lyst til at forklare, hvad der "sker" i delen "positionArray.some((d, i) => { ......." ? Prøver jeg eksempelvis at vende "<=" i "if(scrollPosition <= d) {.... " bliver resultatet hele tiden 500. Jeg er desværre ikke den skarpeste på javascript endnu, men vil meget gerne lære. Min egen løsning kan findes i link nedenfor, og er en blanding af egne påfund og saksede snippets fra stackoverflow: https://jsfiddle.net[...]
--
#7
inckie
Ultra Nørd
14-11-2017 17:32

Rapporter til Admin
#0 Mit bud er at det kan gøres på 3-4 linjer: https://jsfiddle.net[...] med sort() #6 Du må meget gerne sørge for din kode er ordenlig formateret, før du præsentere den for andre.
--
Take everything you like seriously, except yourselves.
--
Sidst redigeret 14-11-2017 17:34
#8
Chri.s
Super Supporter
14-11-2017 21:38

Rapporter til Admin
#7 ser dejligt minimalistisk ud! - men vil du evt. forklare hvordan det fungerer? Hvordan kommer den eksempelvis frem til, at x = 277 er nærmest 300? Er det en indbygget funktionalitet i et array eller hvorledes? Og hvad er formålet med variablerne "a" og "b"? PS. det ser ud til at index == 0 uanset hvilken værdi for x man indtaster? :) Mht. formatering så har du ret - det er bare sådan jeg plejer selv at sætte det op.
--
#9
Chri.s
Super Supporter
14-11-2017 21:50

Rapporter til Admin
#7, var vist lidt hurtigt i #8 med at undlade selv lige at slå op ;) Kan se at variablerne a, b blot er "retningen" for sorteringen. Jeg kan dog ikke helt finde ud af, hvad det efterfølgende afsnit helt præcist gør skridtvist? Det er følgende jeg mener: => Math.abs(x - a) - Math.abs(x - b) )[0])
--
#10
Chri.s
Super Supporter
14-11-2017 22:06

Rapporter til Admin
#7 - jeg er vist bare generelt for hurtig til at spørge. Jeg har vist fundet ud af det nu, som jeg også har beskrevet i din jsfiddle som jeg har udvidet lidt her: https://jsfiddle.net[...] Med pågældende formel danner du en ny sortering baseret på "afstanden" af værdierne i arrayet i forhold til x og sorterer det herefter. Det er også derfor at index == 0, da det er den laveste afstand som er først i sorteringen, og deraf placering == 0. Er det helt ved siden af? :)
--
Sidst redigeret 14-11-2017 22:07
#11
inckie
Gæst
15-11-2017 11:52

Rapporter til Admin
sort https://developer.mozilla.org[...] tager en compare funktion som argument
--
Gæstebruger, opret dit eget login og få din egen signatur.
#12
inckie
Ultra Nørd
15-11-2017 16:23

Rapporter til Admin
#10 Det er også derfor at index == 0, da det er den laveste afstand som er først i sorteringen, og deraf placering == 0. Korrekt, se dette eksempel: https://jsfiddle.net[...] hvor jeg sortere en kopi af array'et Hvor jeg også har ændret den måde jeg deklarere sorterings funktionen, så det måske lidt nemmere for dig at gennemskue syntaksen
--
Take everything you like seriously, except yourselves.
--
Sidst redigeret 15-11-2017 16:28
#13
inckie
Ultra Nørd
15-11-2017 16:30

Rapporter til Admin
Forkert jsfiddle link, her er det korrekte: https://jsfiddle.net[...]
--
Take everything you like seriously, except yourselves.
--
Sidst redigeret 15-11-2017 16:33
#14
inckie
Ultra Nørd
15-11-2017 16:35

Rapporter til Admin
ffs, jeg er dårlig til jsfiddle: REAL.PROPER: https://jsfiddle.net[...]
--
Take everything you like seriously, except yourselves.

Opret svar til indlægget: Javascript hvis tal er mellem en række i array


Dit navn:

Din e-mail adresse:


Indholdet fra billedet:
Dit svar: