突出显示滚动时的活动菜单项 [英] Highlight active menu item on scroll
本文介绍了突出显示滚动时的活动菜单项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用jQuery进行单页导航。我想要的是当用户滚动时，突出显示的菜单将被更改。我想出了以下代码：
I am working on an one page navigation with jQuery. What I want is when the user is scrolling, the highlighted menu will be changed. I came up with the following code:
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 →</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 →</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 →</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>
JS
// 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/
这段代码的问题是我收到错误：未捕获的TypeError：无法读取未定义的属性top。
The problem with this piece of code is that I received the error: Uncaught TypeError: Cannot read property 'top' of undefined.
我还没有找到解决方案。
I haven’t find a solution yet.
推荐答案
以下是答案：
// 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 。这意味着，请返回页面顶部。
When a link only has # there is no anchor. It refers to the top of the page, but has no anchor element attached. So getting a top of undefined is impossible. This code now checks if the href length is longer than 1 (Eg: #test) and there's an element on the page with the actual id. If so calculate the offset, if not set the offset to 0. Which means, return to the top of the page.
http://jsfiddle.net/8n06pvy9/8/
实际上，相同类型的答案适用于突出显示问题。它使用 home 导航按钮选择了文档，因为它没有链接到section元素。 jQuery不返回有效选择， position（）将失败。
Actually the same type of answer applies to the highlight problem. It selected the document with the home nav button, since this isn't linked to a section element. jQuery does not return a valid selection and position() will fail.
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");
}
}
});
}
再次检查所选元素是否具有链接的section元素，如果是，则继续。
Again a check if the selected element has a linked section element, if so continue.
http://jsfiddle.net/8n06pvy9/ 9 /
这篇关于突出显示滚动时的活动菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
