我正在使用 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 →</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/ http://jsfiddle.net/8n06pvy9/6/
这段代码的问题是我收到了错误：Uncaught TypeError: Cannot read property 'top' of undefined.
我还没有找到解决办法。
答案如下：
// 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;
}
当一个链接只有#没有锚。它指的是页面的顶部，但没有附加锚元素。所以达到 undefined 的顶部是不可能的。此代码现在检查是否href长度大于 1（例如：#test）并且页面上有一个具有实际 id 的元素。如果是则计算偏移量，如果没有则将偏移量设置为0。这意味着，返回到页面顶部。
http://jsfiddle.net/8n06pvy9/8/ 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/ http://jsfiddle.net/8n06pvy9/9/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
