Utilisez jQuery pour modifier une classe en fonction de la position de défilement

Question

J'ai un site Web d'une seule page qui a une navigation flottante fixe. Je veux être en mesure de mettre en évidence quelle section l'utilisateur est en ajoutant une classe de dire "on" à la navigation pertinente d'un tag.

Cette classe devra être supprimée lorsque l'utilisateur n'est plus sur cette section et que la nouvelle section en cours doit alors être reflétée dans le nav.

Cela ne peut pas être fait par une fonction de clic, car l'utilisateur peut tout simplement faire défiler la page vers le haut ou vers le bas. J'ai une idée si cela peut même être fait ou par où commencer car mon jQuery est TRÈS limité.

Toute aide serait vraiment appréciée.

Voici ma page Web actuelle, qui n'a pas de mise en évidence de nav actif: http://ec2.dragonstaff.com/www.creativegems.co.uk/

Answer 1

Cela semble fonctionner avec votre site:

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"); 
    } 
}); 

Answer 2

Vous pouvez saisir scrollTop de la fenêtre avec

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

http://api.jquery.com/scrollTop

Ensuite, vous passez par le contenu <div> s et cumulativement ajouter leur hauteur jusqu'à ce que vous atteigniez une valeur suffisamment proche de scrollTop. Vous devez probablement expérimenter un peu sur la façon dont vous gérez le chevauchement. Une fois que vous avez fait défiler le contenu de, par exemple, votre portefeuille, vous ajoutez la classe pertinente à l'élément nav.

Answer 3

Juste ici comme l'ajout de cette alternative:

Il y a un plugin jQuery appelé Waypoints. La mise en œuvre est assez facile. L'exemple sur leur site est:

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

Ainsi, aussi longtemps que vous savez ce que l'élément est appelé, Waypoints sera stupide simple à mettre en œuvre.