Verwenden Sie jQuery zu ändern abhängig von der Klasse auf die scroll-position

Habe ich eine einzelne Seite website, die hat eine Feste floating nav. Ich möchte in der Lage sein zu markieren, welchen Bereich der Benutzer auf, durch hinzufügen einer Klasse, sagen wir "on", um die relevanten navigation ein tag.

Dieser Klasse müssen entfernt werden, wenn der Benutzer nicht mehr auf diesem Abschnitt und die neuen aktuellen Abschnitt muss dann wider in die nav.

Diese nicht getan werden kann über eine Klick-Funktion, so kann der Benutzer immer noch nur nach oben und unten scrollen die Seite. Ich habe wissen Ahnung, ob dies auch geschehen ist oder wo zu beginnen, da meine jQuery ist SEHR begrenzt.

Jede Hilfe wäre wirklich zu schätzen.

Hier ist meine aktuelle Webseite, die über keine aktive nav-Hervorhebung: http://ec2.dragonstaff.com/www.creativegems.co.uk/

  • Nicht verschleiern von URLs, das ist nicht twitter und lässt Sie so Aussehen, wie Sie versuchen, spam. Ich öffnete die URL in einer sandbox nur um sicherzustellen, dass Sie nicht ein Narr versucht, um die Menschen zu täuschen (und ich bin froh, dass Sie nicht).
  • Ich habe mit meinem edit Mächte und die un-verschleiert die URL. Genießen Sie, user257493. 🙂
InformationsquelleAutor richardpixel | 2010-10-08
  1. 9

    Scheint dies für die Arbeit mit Ihrer Website:

    var $sections = $('section');  //all content sections
var $navs = $('nav > ul > li');  //all nav sections

var topsArray = $sections.map(function() {
    return $(this).position().top - 300;  //make array of the tops of content
}).get();                                 //  sections, with some padding to
                                          //  change the class a little sooner
var len = topsArray.length;  //quantity of total sections
var currentIndex = 0;        //current section selected

var getCurrent = function( top ) {   //take the current top position, and see which
    for( var i = 0; i < len; i++ ) {   //index should be displayed
        if( top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1] ) {
            return i;
        }
    }
};

   //on scroll,  call the getCurrent() function above, and see if we are in the
   //   current displayed section. If not, add the "selected" class to the
   //   current nav, and remove it from the previous "selected" nav
$(document).scroll(function(e) {
    var scrollTop = $(this).scrollTop();
    var checkIndex = getCurrent( scrollTop );
    if( checkIndex !== currentIndex ) {
        currentIndex = checkIndex;
        $navs.eq( currentIndex ).addClass("selected").siblings(".selected").removeClass("selected");
    }
});
    • Dies funktionierte perfekt, danke Patrick. Die einzige änderung die ich machen musste war in den Geschwister als es die es wissen müssen, war eine Klasse: Geschwister(".ausgewählt")
    • Ah ja, ich hatte verpasst, die .. Behoben. Froh, Sie fing es auf und dass es für Sie gearbeitet. :o)
    • Nach einigen mehr Tests diese nicht wirklich zu funktionieren scheinen, im IE (6,7,8 oder 9). Glaube nicht, dass Sie irgendwelche Ideen, warum dies geschieht?
    • Hängt davon ab, was nicht funktioniert. Hat die .scroll() handler Feuer überhaupt? Wenn Sie nicht sicher sind. Stelle eine Warnung in der Spitze der handler. Wenn Sie finden, dass es nicht brennen, und dann versuchen $('body').scroll(func... statt $(document).scroll(func....
    • Vielen Dank für Ihre Hilfe, und Sie waren in der richtigen Stelle, aber ich brauchte $(window).scrollen Sie(func....
    InformationsquelleAutor user113716
  2. 0

    Könnten Sie schnappen das Fenster scrollTop mit

    var scrollTop=$(window).scrollTop();

    http://api.jquery.com/scrollTop

    Dann gehen Sie durch den Inhalt <div>s und kumulativ fügen Sie Ihre Höhe, bis Sie auf einen Wert, der nahe genug an scrollTop. Sie müssen möglicherweise ein wenig Experimentieren, mit Bezug darauf, wie Sie behandeln überlappen.

    Sobald Sie dachte, dass Ihr ein Bildlauf durchgeführt werden, um den Inhalt, sagen wir, Ihrem portfolio hinzufügen der relevanten Klasse an dem nav-element.

    InformationsquelleAutor Leonard Ehrenfried
  3. 0

    Nur hinzufügen, dass diese hier als alternative:

    Es ist ein jQuery-plugin namens Wegpunkte. Die Umsetzung ist ziemlich einfach. Das Beispiel auf Ihrer Website:

    $('.thing').waypoint(function(direction) {
    alert('Top of thing hit top of viewport.');
});

    So, solange Sie wissen, was das element wird als Wegpunkte wird dumm einfach zu implementieren.

    InformationsquelleAutor Brendan
Schreibe einen Kommentar