Forum : Petit problème Waypoint, id Undifined

Bonjour,

Voila je cherche à avoir des petites bulles fixer à mon header qui indique dans quelle section de la page.

Donc le comportement c'est : je passe devant la section x et si ma bulle à le même id alors je lui fait changer de couleur.

Sauf que, évidamment il y a un hic. Lorsque je detecte la section il ne trouve pas l'id... (qui en a bien un). Le console log indique Undifined.

PS : J'utilise wordpress 4.3 / jQuery 1.12 / jquery.waypoints.min.js

Je vous montre la ligne qui ne trouve pas :

var activeSection = $(this);
var sectionId = activeSection.attr('id');

Je vous montre ma fonction complète pour les plus curieux, dans le doute :

$('section').waypoint(function(direction) {
  //var activeSection = $(this).next();
  var activeSection = $(this);
  if(direction === 'down'){
    activeSection = $(this).next();
  }
  console.log(activeSection);
  //activeSection = $(this);
  var sectionId = activeSection.attr('id');
  console.log(sectionId);
  $('ul li').removeClass('active');
  $('ul li.' + sectionId).addClass('active');
});

Mon html :

<section class="qui-sommes" id="qui-sommes" itemprop="articleBody"></section>
<section class="accreditations clearfix" id="accreditations"></section>
<section class="references" id="references"></section>

//bouton du header
<div class="indicator-propos">
            <ul>
                <li class="qui-sommes"><a href="#qui-sommes">1</a></li>
                <li class="accreditations"><a href="#accreditations">2</a></li>
                <li class="references"><a href="#references">3</a></li>
            </ul>
</div>

Merci beaucoup !

10 réponses

Florian.C

Auteur

Faut-il que je reformule ? :)

celionor

As-tu essayé ceci :

// http://imakewebthings.com/waypoints/guides/jquery-zepto/
var id = this.element.id;
console.log(id);

Florian.C

Auteur

Bonjour,

Merci pour ta réponse !

Oui et le problème qu'il ne detecte que m'a première section.. mais pas les deux suivantes.

celionor

Je ne connais pas la librairie, mais il faut peut-être que ton scroll arrive au niveau de la seconde section.
C'est bien le cas ?
Le console.log() te retourne quelque chose quand tu arrives sur les autres sections ?

Florian.C

Auteur

C'est un plugin jQuery http://imakewebthings.com/waypoints/

Oui je scroll de section en section mais il n'y a que la première qui est detecté quand je passe dessus.

Non du coup :/

Merci !

Florian.C

Auteur

Vraiment personne n'a déjà eu cette situation ?

saibe

hello,
je pense plutôt que peu de monde utilise ce plugin ;)
d'après ce que je vois c'est un intersection Observer et que la dérivé jquery est étrange.... en effet, il ne semble pas comprendre le jquery....
dans ta function commente tout et tente un console.log(this.element.id) pour voir...

saibe

sorry, j'ai plussoyé @celionor...
debug juste thisou $(this) pour voir ;)
sinon, tu as essayé la solution no-jquery ?

Florian.C

Auteur

Ah AH attention tu m'as fait avancer d'un petit pas merci beaucoup. Je m'explique.

J'ai fait ceci :

var activeSection = this;
console.log(activeSection);

Et ca me donne cela http://prntscr.com/emcgg3

Donc on voit bien mes sections comme cela ! Je vais appronfondir cette piste merci.

Non c'est la chose que j'ai retrouvé le plus souvent mais je suis ouvert :)

Florian.C

Auteur

En faite j'ai trouvé c'est tout bête, la taille de mes blocs ne sont pas mal proportionner. La première section prennant plus de place que les autres il ne les detecte pas (parce que sur mobile ca fonctionne).

Bref merci !