jQuery : hinzufügen von css-Klasse für Menüpunkt, basierend auf browser-scroller-position

Ich habe ein Menü:

  <ul class="menu-bottom">
  <li id="m1" class="active"><a id="1" href="#"><span>Link 1</span></a></li>
   <li id="m2"><a id="2" href="#"><span>Link 2</span></a></li>
   <li id="m3"><a id="3" href="#"><span>Link 3</span></a></li>
</ul>

Möchte ich, dass je nach browser-scroller-position, die "aktiv" Klasse geht die richtige < li > element.

Dies ist, wie ich es sehe :

     if ($(document).height() == 500) {
$('#m1').parent().addClass('active').
siblings().removeClass('active');
}

     if ($(document).height() == 1000) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
}

     if ($(document).height() == 1500) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
}

Ich bin nicht sehr vertraut mit jQuery Abmessungen Eigenschaften, also dieser code macht nicht viel Sinn, aber ich hoffe, Sie bekommen die Idee.

Wenn jemand mir sagen könnte, wie diese Arbeit zu machen, es wäre wirklich cool.

Dank 🙂

InformationsquelleAutor b0nd | 2010-04-24

  1. 11

    Es ist nicht ganz klar, was es ist, was Sie zu tun versuchen, aber ich werde einen Stich an Sie. Um die Höhe der Fenster ist vertikal scrollen Sie wollen, verwenden Sie die jQuery - scrollTop() Funktion. Die height() - Funktion gibt Ihnen die Höhe in Pixel des Elements, auf dem es aufgerufen wird, so wird es nicht sehr nützlich sein, wenn die scroll-Wert ist, was Sie wollen. So etwas könnte näher an das, was Sie brauchen:

    //bind a function to the window's scroll event, this will update
//the 'active' class every time the user scrolls the window
$(window).scroll(function() {    
    //find the li with class 'active' and remove it
    $("ul.menu-bottom li.active").removeClass("active");
    //get the amount the window has scrolled
    var scroll = $(window).scrollTop();
    //add the 'active' class to the correct li based on the scroll amount
    if (scroll <= 500) {
        $("#m1").addClass("active");
    }
    else if (scroll <= 1000) {
        $("#m2").addClass("active");
    }
    else {
        $("#m3").addClass("active");
    }
}

    Selbst wenn das obige nicht auf dem richtigen Weg, es gibt ein paar andere Dinge zu beachten, die helfen könnten. Die Linien wie $('#m1').parent().addClass('active').siblings().removeClass('active'); sind wahrscheinlich nicht tun, was Sie erwarten. Anstatt das hinzufügen der 'active' - Klasse, der li und dann entfernen Sie es von der li 's Geschwister sind, ist es eigentlich das hinzufügen der Klasse zu der übergeordneten ul und entfernen Sie es aus dem ul' s Geschwister. Versuchen Sie .parent() aus jeder Zeile, und das sollte funktionieren.

    Auch, da du mit == in if-Bedingungen, die Klasse wird nur Hinzugefügt, wenn der Wert genau 500 oder 1000 etc. was ich bezweifle ist, was Sie wollen. Das ist der Grund, warum in dem code oben habe ich es geändert werden, <= für die bedingten Anweisungen.

    Hoffe, das hilft.

    Vielen, vielen Dank! Es tut genau das, was ich wollte : )
    Kein problem. Froh, dass ich helfen konnte.
    Wow!!! Danke Bryan, das mein Problem gelöst 🙂
    Schöne Lösung !
    Ich glaube, du ' re fehlt ); auf deine Letzte Zeile... Danke!

    InformationsquelleAutor Bryan

Schreibe einen Kommentar