Avatar billede ChristofferDK1989 Nybegynder
27. april 2012 - 10:22 Der er 4 kommentarer

Jquery scroll detector

Hej Eksperter!

Jeg leder efter noget hjælp i forhold til at implementere en slags "scroll-detector" - som skal kunne markere et menupunkt i forhold til hvor på siden brugeren er. Jeg har fundet noget der hedder Scrollspy - Men jeg havde lidt problemer med at få det til at fungere!

Det skal siges jeg er relativ ny i forhold til at bruge jQuery - så det kan sagtens være jeg bare trænger til en der kan sætte mig ind i hvordan det implementeres.

Men ellers er jeg faldet over det her stykke kode som vidst skulle kunne nogenlunde det samme.

Jeg er bare i tvivl om hvad og hvor jeg skal skrive forskellige ting.



setInterval(function () {
  if ($("body").scrollTop() > someLimit) {
    updateNavigation();
  }
}, 100);


Jeg tænker > "someLimit" skal erstattet med et antal pixels - er det helt galt ?

og så skal jeg updateNavigation funktionen kunne tilføje en class (active feks) til det menupunkt som someLimit referer til - og så styler jeg class'en.

På forhånd tak - Mvh. Christoffer
Avatar billede mireigi Novice
27. april 2012 - 14:08 #1
Dette burde kunne gøre det for dig. Koden er dog utestet.
$(parent.document).scroll(function()
{
  if($("body").scrollTop() > someLimit)
  {
      updateNavigation();
  }
});

function updateNavigation()
{
  if(!$("element").hasClass("MyClass"))
  {
      $("element").addClass("MyClass");
  }
}
Avatar billede ChristofferDK1989 Nybegynder
27. april 2012 - 15:06 #2
Jeg er nået længere siden jeg stillede spørgsmålet og har fået implementeret bootstrap scrollspy - nu ligger problemet i at jeg skal target'e li a fremfor li.


        selector = this.selector
          + '[data-target="' + target + '"],'
          + this.selector + '[href="' + target + '"]'

        active = $(selector)
          .parent('li')
          .addClass('active')

Noget forslag ??
Avatar billede timpet Novice
28. april 2012 - 21:26 #3
Jeg lytter lige med her
Avatar billede mireigi Novice
29. april 2012 - 12:36 #4
Ifølge JQuery dokumentationen, burde du kunne gøre dette:
selector =    this.selector
        + '[data-target="' + target + '"],'
        + this.selector + '[href="' + target + '"]'

active =     $(selector)
        .parent('li > a')
        .addClass('active')
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester