Mettre en surbrillance l'élément de menu actif sur le défilement

Je travaille sur une navigation en une page avec jQuery. Ce que je veux, c'est lorsque l'utilisateur défile, le menu en surbrillance sera modifié. Je suis arrivé avec le code suivant:

HTML

<body class="index m-scene" id="main"> <!-- // Start HTML \\ --> <header id="header" class="fixed"> <div class="container_12"> <h1 class="grid_4"> <a href="#" class="logo backtotop"> <img src="images/logo.png" alt=""> <span>Maurice Draait</span> </a> </h1><!-- End h1.grid_4 --> <div class="grid_8"> <a href="#" class="toggle-menu"><span>Menu</span></a> <nav id="primary-navwrapper" class="pushy-right"> <ul id="listnav"> <li><a href="#" class="current">Home</a></li> <li><a href="#aboutus">About us</a></li> <li><a href="#events">Agenda</a></li> <li><a href="#gallery">Galerij</a></li> <li><a href="#organisation">Organisatie</a></li> <li><a href="#contact">Contact</a></li> </ul><!-- End ul#listnav --> </nav><!-- End nav#primary-navwrapper .pushy-right --> </div><!-- End div.grid_8 --> <div class="clear"></div><!-- End div.clear --> </div><!-- End div.container_12 --> </header><!-- End header#header .fixed --> <div class="m-page scene_element scene_element--fadeinup"> <main class="container"> <section id="hero"> <figure> <figcaption> <div class="container_12"> <hgroup class="grid_12"> <h1> Headline 1 </h1> <h2> Headline 2 </h2> <h3> Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. <br> Nullam id dolor id nibh ultricies vehicula ut id elit. </h3> </hgroup><!-- End hgroup.grid_12 --> <div class="clear"></div><!-- End div.clear --> </div><!-- End div.container_12 center --> </figcaption> </figure><!-- End figure --> </section><!-- End section#hero --> <section id="aboutus" class="e-waypoint"> <div class="container_12 center"> <header class="grid_12 center"> <h3>Maurice Draait</h3> <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore <br> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, <br> sunt in culpa qui officia deserunt mollit anim id est laborum. <br> Sed ut perspiciatis unde omnis iste natus error sit. </p> </header><!-- End header.grid_12 center --> <footer class="grid_12 center"> <a href="#" title="Meer weten" class="button primary">Learn more about us &rarr;</a> </footer><!-- End footer.grid_12 center --> <div class="clear"></div><!-- End div.clear --> </div><!-- End div.container_12 center --> </section><!-- End section#aboutus .e-waypoint --> <section id="events" class="alt"> <div class="container_12 center"> <header class="grid_12 center"> <h3>Agenda</h3> <p> Donec quis semper magna. Vivamus pellentesque tempor tincidunt. <br> Proin quis eros dolor. Donec sed venenatis enim. </p> </header><!-- End header.grid_12 center --> <article class="grid_6 post-entry event"> <a href="#" title=""> <figure class="post-thumbnail"> <img src="images/event.png" alt="Placehold"> <figcaption> <h4>22 november</h4> <p>Maecenas sed enim iaculis.</p> </figcaption><!-- End figcaption --> </figure><!-- End figure.post-thumbnail --> </a> </article><!-- End article.grid_6 post-entry event --> <article class="grid_6 post-entry event"> <a href="#" title=""> <figure class="post-thumbnail"> <img src="images/event.png" alt="Placehold"> <figcaption> <h4>8 december</h4> <p>Quisque hendrerit.</p> </figcaption><!-- End figcaption --> </figure><!-- End figure.post-thumbnail --> </a> </article><!-- End article.grid_6 post-entry event --> <div class="clear"></div><!-- End div.clear --> </div><!-- End div.container_12 center --> </section><!-- End section#events .alt --> <section id="gallery" class="even"> <div class="container_12"> <header class="grid_12 center"> <h3>Galerij</h3> <p> Donec quis semper magna. Vivamus pellentesque tempor tincidunt. <br> Proin quis eros dolor. Donec sed venenatis enim. </p> </header><!-- End header.grid_12 center --> <div class="entry"> <article class="grid_4 post-entry"> <a href="#" title=""> <figure class="post-thumbnail"> <img src="images/placehold.png" alt="Placehold"> </figure><!-- End figure.post-thumbnail --> <header> <h4>Maurice Draait Weer</h4> <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p> </header><!-- End header --> </a> </article><!-- End article.grid_4 post-entry --> <article class="grid_4 post-entry"> <a href="#" title=""> <figure class="post-thumbnail"> <img src="images/placehold.png" alt="Placehold"> </figure><!-- End figure.post-thumbnail --> <header> <h4>Maurice Draait Weer</h4> <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p> </header><!-- End header --> </a> </article><!-- End article.grid_4 post-entry --> <article class="grid_4 post-entry"> <a href="#" title=""> <figure class="post-thumbnail"> <img src="images/placehold.png" alt="Placehold"> </figure><!-- End figure.post-thumbnail --> <header> <h4>Maurice Draait Weer</h4> <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p> </header><!-- End header --> </a> </article><!-- End article.grid_4 post-entry --> <article class="grid_4 post-entry"> <a href="#" title=""> <figure class="post-thumbnail"> <img src="images/placehold.png" alt="Placehold"> </figure><!-- End figure.post-thumbnail --> <header> <h4>Maurice Draait Weer</h4> <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p> </header><!-- End header --> </a> </article><!-- End article.grid_4 post-entry --> <article class="grid_4 post-entry"> <a href="#" title=""> <figure class="post-thumbnail"> <img src="images/placehold.png" alt="Placehold"> </figure><!-- End figure.post-thumbnail --> <header> <h4>Maurice Draait Weer</h4> <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p> </header><!-- End header --> </a> </article><!-- End article.grid_4 post-entry --> <article class="grid_4 post-entry"> <a href="#" title=""> <figure class="post-thumbnail"> <img src="images/placehold.png" alt="Placehold"> </figure><!-- End figure.post-thumbnail --> <header> <h4>Maurice Draait Weer</h4> <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p> </header><!-- End header --> </a> </article><!-- End article.grid_4 post-entry --> </div><!-- End div.entry --> <div class="clear"></div><!-- End div.clear --> </div><!-- End div.container_12 --> </section><!-- End section#gallery .even --> <section id="organisation" class="alt"> <div class="container_12 center"> <header class="grid_12 center"> <h3>Organisatie</h3> <p> Donec quis semper magna. Vivamus pellentesque tempor tincidunt. <br> Proin quis eros dolor. Donec sed venenatis enim. </p> </header><!-- End header.grid_12 center --> <article class="grid_3 post-entry"> <figure class="post-thumbnail avatar"> <img src="images/casperbiemans.png" alt="Placehold"> <figcaption> <h4>Headline 4</h4> <p>Donec quis semper magna.</p> </figcaption><!-- End figcaption --> </figure><!-- End figure.post-thumbnail --> </article><!-- End article.grid_3 post-entry --> <article class="grid_3 post-entry"> <figure class="post-thumbnail avatar"> <img src="images/casperbiemans.png" alt="Placehold"> <figcaption> <h4>Headline 4</h4> <p>Donec quis semper magna.</p> </figcaption><!-- End figcaption --> </figure><!-- End figure.post-thumbnail --> </article><!-- End article.grid_3 post-entry --> <article class="grid_3 post-entry"> <figure class="post-thumbnail avatar"> <img src="images/casperbiemans.png" alt="Placehold"> <figcaption> <h4>Headline 4</h4> <p>Donec quis semper magna.</p> </figcaption><!-- End figcaption --> </figure><!-- End figure.post-thumbnail --> </article><!-- End article.grid_3 post-entry --> <article class="grid_3 post-entry"> <figure class="post-thumbnailnail avatar"> <img src="images/casperbiemans.png" alt="Placehold"> <figcaption> <h4>Headline 4</h4> <p>Donec quis semper magna.</p> </figcaption><!-- End figcaption --> </figure><!-- End figure.post-thumbnail --> </article><!-- End article.grid_3 post-entry --> <div class="clear"></div><!-- End div.clear --> </div><!-- End div.container_12 center --> </section><!-- End section#organisation .alt --> <figure class="parallax socialmedia"> <figcaption> <div class="container_12"> <header class="grid_12 center"> <h3>Like ons op Facebook</h3> <p> Maecenas sed enim iaculis, elementum enim quis, <br> dignissim lectus. Quisque at pellentesque. </p> </header><!-- End header.grid_12 center --> <footer class="grid_12 center"> <a href="#" title="Volg ons online" class="button primary" id="buttonContact">Volg ons online &rarr;</a> </footer><!-- End footer.grid_12 center --> <div class="clear"></div><!-- End div.clear --> </div><!-- End div.container_12 --> </figcaption> </figure><!-- End figure.parallax social --> <section id="contact" class="even"> <div class="container_12 center"> <header class="grid_12 center"> <h3>Contact</h3> <a href="contact.html" title="Meer weten" class="button primary">Get in touch &rarr;</a> </header><!-- End header.grid_12 center --> <div class="clear"></div><!-- End div.clear --> </div><!-- End div.container_12 center --> </section><!-- End section#contact .even --> </main><!-- End main.container --> <footer id="footer"> <div class="container_12"> <div class="grid_12 center"> <ul class="list-of-links"> <li><a href="#aboutus">About us</a></li> <li><a href="#galerij">Galerij</a></li> <li><a href="#organisatie">Organisatie</a></li> <li><a href="#contact">Contact</a></li> </ul><!-- End ul#listnav --> </div><!-- End div.grid_12 center --> <div class="clear"></div><!-- End div.clear --> </div><!-- End div.container_12 --> </footer><!-- End footer#footer --> </div> <!-- JavaScript --> <script src="js/retina.js" type="text/javascript"></script> </body> </html>

 // Update current item class function setActiveListElements(event){ var windowPos = $(window).scrollTop(); $('#primary-navwrapper li a[href^="#"]').each(function() { var currentLink = $(this); var refElement = $(currentLink.attr("href")); if (refElement.position() <= windowPos && refElement.position().top + refElement.height() > windowPos) { $('#primary-navwrapper li a').removeClass("current"); currentLink.addClass("current"); } else{ currentLink.removeClass("current"); } }); } // Update menu item on scroll $(window).scroll(function() { // Call function setActiveListElements(); });

Http://jsfiddle.net/8n06pvy9/6/

Le problème avec ce code est que j'ai reçu l'erreur: Uncaught TypeError: Cannot read property 'top' of undefined .

Je n'ai pas encore trouvé de solution.

Voici la réponse:

  // The id of the section we want to go to. var anchorId = $(this).attr("href"); // Our scroll target : the top position of the // section that has the id referenced by our href. if (anchorId.length > 1 && $(anchorId)) { var target = $(anchorId).offset().top - offset; } else { var target = 0; }

Lorsqu'un lien ne comporte que # il n'y a pas d'ancre. Il se réfère au haut de la page, mais n'a pas d'élément d'ancrage. Donc, obtenir un sommet d'indéfini est impossible. Ce code vérifie maintenant si la longueur href est supérieure à 1 (Exemple: #test ) et il y a un élément sur la page avec l'identifiant réel. Si tel est le cas, calculez le décalage, sinon définissez le décalage sur 0 . Ce qui signifie, retourner en haut de la page.

http://jsfiddle.net/8n06pvy9/8/

En fait, le même type de réponse s'applique au problème de surbrillance. Il a sélectionné le document avec le bouton de navigation de la home , car il n'est pas lié à un élément de section. JQuery ne retourne pas une sélection et une position() valides position() échoueront.

 function setActiveListElements(event){ var windowPos = $(window).scrollTop(); $('#primary-navwrapper li a[href^="#"]').each(function() { var currentLink = $(this); if ($(currentLink.attr("href")).length > 0) { var refElement = $(currentLink.attr("href")); if (refElement.position().top <= windowPos && (refElement.position().top + refElement.height() + $("#primary-navwrapper").height() ) > windowPos) { $('#primary-navwrapper li a').removeClass("current"); currentLink.addClass("current"); } else{ currentLink.removeClass("current"); } } }); }

Encore une fois, vérifiez si l'élément sélectionné a un élément de section lié, si tel est le cas.

http://jsfiddle.net/8n06pvy/9/9/