web-dev-qa-db-fra.com

jquery scroll, change la classe active de navigation pendant le défilement de la page, par rapport aux sections

http://jsfiddle.net/motocomdigital/gUWdJ/


Je suis après une technique de défilement jquery s'il vous plaît que je voudrais adapter à mon projet.

S'il vous plaît voir mon exemple de projet comme un violon ici http://jsfiddle.net/motocomdigital/gUWdJ/

Actuellement, vous pouvez voir que mes liens de navigation animent automatiquement le défilement par rapport aux <section>.

Ma question est, en utilisant la méthode $(window).scroll, comment puis-je ajouter une classe .active à mon nav a lorsque les sections atteignent le haut de la fenêtre?

Ainsi, par exemple, si l'utilisateur fait défiler la page (au lieu des liens de navigation), je veux que la classe active soit ajoutée au lien de navigation relatif. Indiquant où vous êtes sur la page.

La classe active devra être supprimée puis ajoutée à chaque fois que je devine lorsque l'utilisateur fait défiler la page.

Vous devrez également tenir compte de la hauteur de 28 pixels de la barre de navigation fixe, fenêtre décalée du haut.


Quelqu'un peut-il me montrer une technique que je peux essayer d’utiliser ou d’adapter, ou peut-être me montrer en utilisant mon jsfiddle :)


Toute aide serait très appréciée, merci d'avance!


http://jsfiddle.net/motocomdigital/gUWdJ/


enter image description here

jqueryjsfiddle
13
Joshc

Si vous souhaitez une fonction plus générique:

VOIR LA DÉMO

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('nav').addClass('fixed');
        $('.wrapper section').each(function(i) {
            if ($(this).position().top <= windscroll - 100) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });

    } else {

        $('nav').removeClass('fixed');
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();​
41
A. Wolff

Vous pouvez le faire de cette manière: http://jsfiddle.net/gUWdJ/1/

$(window).scroll(function() {

    if ($(this).scrollTop() < $('section[data-anchor="top"]').offset().top) {
       $('nav a').removeClass('active');
    }

    if ($(this).scrollTop() >= $('section[data-anchor="top"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(0)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="news"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(1)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="products"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(2)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(3)').addClass('active');
    }

});
5
Jai

Je suis allé de l'avant et j'ai modifié mon script à partir de A. Wolf parce que je devais m'assurer que les éléments de mon menu étaient allumés avec une différence supérieure négative au lieu de 0. Cela fonctionne beaucoup mieux que de créer une fonction séparée et évite de créer un Cliquez sur événement pour chaque élément de menu. Je voudrais également modifier ce script pour tenir compte du dernier élément du menu. Il devrait être automatiquement mis en surbrillance si l’avant-dernier élément est. Je suppose que le mien est très similaire mais différent car je manipulais chaque boucle en dehors de la fonction de soulignement principal. L’autre atout de ma modification est que le fait d’avoir des images à l’intérieur d’un lien à l’intérieur d’un élément de menu et la hauteur d’un élément sont pris en compte lorsque le bas de cet élément touche le haut de la page, ce qui correspond au moment où la surbrillance se terminer avant un nouveau. 

function highlight(item)
{
var itemTop = jQuery(item).position().top;

var windowTop = jQuery(window).scrollTop(); 
var topDifference = (windowTop - itemTop); 

var itemHeight = jQuery(item).height();
var bottomDifference = topDifference - itemHeight; 

var menuId = jQuery('#nav-icons li a').attr('href');
if (menuId = item)
{
    if(topDifference > -1 && bottomDifference < 0)
    {
        jQuery("#nav-icons li a[href='" + item + "']").parent().addClass('active');
        jQuery("#nav-icons li a[href!='" + item + "']").parent().removeClass('active');
    }
    else {
        jQuery("#nav-icons li a[href='" + item + "']").parent().removeClass('active');
    }
}
}
jQuery('#nav-icons li a').each(function(){
var eachAttr = jQuery(this).attr('href');
highlight(eachAttr);
});
0
Jason