OnePage | Ajouter la class active lors du scroll

Version imprimable

Bonjour,

je suis en train de créer un site web (onepage) et j'aimerai ajouter la class active lorsque je scroll sur le href en question

J'ai testais plein de truc plein de trucs mais rien y fait, quelqu'un saurai comment faire ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<ul class="navbar-nav ml-auto">
   <li class="nav-item"><a class="nav-link active" href="#home">HOME</a></li>
   <li class="nav-item"><a class="nav-link" href="#about">ABOUT</a></li>
   <li class="nav-item"><a class="nav-link" href="#gallery">GALLERY</a></li>
   <li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
</ul>
<div id=#home>
   <!-- contenu -->
</div>
<div id=#about>
   <!-- contenu -->
</div>
<div id=#gallery>
   <!-- contenu -->
</div>
<div id=#contact>
   <!-- contenu -->
</div>

Salut,
supprime d'abord le diez "#", et utilise des apostrophes '' ou "" autour des id des div home,about,gallery,contact

Code:

1
2
3
4
5
 
<div id='home'></div>
<div id='about'></div>
<div id='gallery'></div>
<div id='contact'></div>

Puis essaie ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(function(){
   var cible;
   $(".nav-link").click(function(e){
        e.preventDefault();//empêcher le navigateur de suivre le lien du <a> sur lequel tu as cliqué 
    	cible=$('#'+$(this).attr('href').replace('#',''));
        $('.navbar-nav').find('.nav-link').removeClass('active');//supprime la class active de tout les a.nav-link
        $(this).addClass('active');//attribuer la classe active à l’élément cliqué
        console.log('le id cible :'+cible.attr('id')
            +' est à :'+cible.offset().top+'px du top.');
        $('html,body').scrollTop(cible.offset().top);
    });
});

une option supplémentaire c'est d'attacher l'événement clic aux <li> conteneurs des <a> :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$(function(){
  var cible;
  $(".nav-item").click(function(e){
     $(this).closest('.navbar-nav')
     .find('.nav-link')
     .removeClass('active')
     .closest('.navbar-nav')
     .find($(this).find('.nav-link')).addClass('active');
     cible=$('#'+$(this)
     .find('.nav-link').attr('href')
     .replace('#',''));
     console.log('le id cible :'+cible.attr('id')
        +' est à :'+cible.offset().top+'px du top.');
      $('html,body').scrollTop(cible.offset().top);
  });
});

Bonjour,
Si j'ai bien compris, tu souhaites que la classe "active" soit appliquée sur l'élément dès lors qu'on a scrollé dessus (qu'on ait cliqué sur la navigation ou non).
Il suffit pour cela d'intercepter l'événément scroll du navigateur, et de vérifier qu'on a "dépassé", en position de scroll, l'élément correspondant de la navigation.
En gros un truc comme ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
var $navItems = $('.navbar-nav').find('a'), // on récupère tous les liens de la nav
    $previousActive = null, // on créé une variable qui va nous permettre de stocker l'élément précédemment actif
    threshold = 150; // débattement
 
$(window).on('scroll', function(){ // à chaque fois qu'on scroll
    var currentScrollTop = $(this).scrollTop(); // on récupère la position du scroll
 
    var $active = null;
    $navItems.each(function(){ // on parcourt chacun des liens
        var $navItem = $(this),
            $target = $($navItem.attr('href')); // on va chercher dans le DOM l'élement correspondant ciblé
 
        if($target.offset().top <= currentScrollTop + threshold){ // si son offset top est supérieur à la position de scroll actuelle - le débattement
            $active = $navItem; // il est actif
        }
    });
 
    // on ne garde que le dernier élément actif
    if($active != null && $previousActive != $active){
        if($previousActive != null) $previousActive.removeClass('active'); // on supprime la classe active précédente
        $active.addClass('active'); // on l'ajoute sur l'élément actuellement scrollé
        $previousActive = $active;
    }
});

04/06/2019, 18h45
SeeZix

Parfait, ça fonctionne nickel, reste plus qu'à comprendre comment cela fonctionne, merci ! :)