突出顯示滾動中的活動菜單項

-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（）'在某處返回undefined。 – Mouser 2015-02-08 13:36:17

查看更新的問題。 – Caspert 2015-02-08 13:38:33

我真的希望那些不是手動評論。 – Nit 2015-02-08 13:41:13

這裏的答案：

// 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），並且頁面上有實際ID的元素。如果這樣計算偏移量，則不設置偏移量爲0。這意味着，返回到頁面的頂部。

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

實際上是同一類型的答案適用於突出問題。它選擇帶有home導航按鈕的文檔，因爲它沒有鏈接到節元素。 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 2015-02-08 13:57:47

@Caspert好，如果我點擊主頁按鈕我得到了'未捕獲的TypeError：無法讀取undefined的屬性'頂部'。' – Mouser 2015-02-08 13:58:38

哦，我明白了。對不正確的評論抱歉！也許你也有突出顯示的菜單項的解決方案？ – Caspert 2015-02-08 14:00:27

突出顯示滾動中的活動菜單項

回答

相關問題