Выделить активный пункт меню на прокрутке

-1

Я работаю над одностраничной навигацией с помощью jQuery. Я хочу, когда пользователь прокручивает, выделенное меню будет изменено. Я придумал следующий код:Выделить активный пункт меню на прокрутке

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/

Проблема с этой частью кода является то, что я получил ошибку: Uncaught TypeError: Cannot read property 'top' of undefined.

Я еще не нашел решение.

источник

2015-02-08 Caspert

Без вашего HTML это сложно. Однако 'position()' возвращается где-то неопределенным. – Mouser

См. Обновленный вопрос. – Caspert

Я действительно надеюсь, что это не ручные комментарии. – Nit

Вот ответ:

// 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; 
    }

Когда ссылка имеет только # нет якоря. Он относится к верхней части страницы, но не имеет прикрепленного элемента привязки. Так что получение вершины неопределенного невозможно. Этот код теперь проверяет, длина href длиннее 1 (например: #test), и есть элемент на странице с фактическим идентификатором. Если так рассчитать смещение, если не установить смещение на 0. Это означает, что вернитесь в начало страницы.

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

На самом деле тот же самый тип ответа относится к проблеме выделения. Он выбрал документ с кнопкой home nav, так как это не связано с элементом раздела. jQuery не возвращает допустимый выбор, и position() не будет работать.

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

Опять же проверьте, имеет ли выделенный элемент элемент связанной секции, если это так.

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

источник

2015-02-08 13:54:21 Mouser

Навигационные ссылки уже работают. Только проблема в том, что он не обновляет выделенный класс ... Таким образом, выше этот код не нужен для этого сообщения. – Caspert

@ Касперт хорошо, если я нажал кнопку «домой», я получил «Uncaught TypeError: не могу прочитать свойство« top »из undefined.' – Mouser

О, я вижу. Извините за неправильный комментарий! Возможно, у вас есть решение для выделенного пункта меню? – Caspert

Выделить активный пункт меню на прокрутке

ответ

Смежные вопросы