我正在开发一个新网站。现在我有一个固定位置的菜单列表:
菜单html
<ul id="work-nav">
<li class="selected">
<span class="label">new</span>
<a href="#cake-film">Cake Film</a>
</li>
<li>
<a href="#LOS-BANGELES">Los Bangeles</a>
</li>
<li>
<a href="#museumnacht">Museumnacht - N8</a>
</li>
<li>
<a href="#crosby-stills-nash">Crosby, Stills & Nash</a>
</li>
<li>
<a href="#meltinpot">Meltin'Pot</a>
</li>
<li>
<a href="#nstore">N-store</a>
</li>
<li>
<a href="#viewbook">Viewbook</a>
</li>
<li>
<a href="#foodnotes">Foodnotes</a>
</li>
</ul>
我想要它做的是文章的顶部(带有链接锚的ID):
文章 html
<article id="#LOS-BANGELES" class="page">
<div class="wrap">
<div class="info">
<p>Los Bangeles Sed eu mauris nibh. Nunc sit amet mauris vitae nibh ultricies
volutpat id a massa. Nulla lobortis odio vel velit eleifend at elementum.
Sed eu mauris nibh. Nunc sit amet mauris vitae nibh ultricies volutpat
id a massa.</p>
<p>Nulla lobortis odio vel velit eleifend at elementum</p>
</div>
</div>
</article>
到达视口的顶部,它应该将文章.info
div 附加到相关列表项的下方。像这样。
期望的结果 html
<li class="selected">
<a href="#LOS-BANGELES">Los Bangeles</a>
</li>
<li class="info">THE INFO FROM THE LOS BANGELES ARTICLE</li>
我如何实现这一目标?我正在使用航路点来检查锚点是否在视口中。
jQuery解决方案?
$('#work article').waypoint(function (d) {
var $active = $(this);
if (d === "up") {
$active = $active.prev();
}
if (!$active.length) $active = $active.end();
$('.active').removeClass('active');
$active.addClass('active');
/*
SOMEWHERE HERE I NEED TO REMOVE THE.info LI FROM THE OLD SELECTED MENU ITEM, IF EXSISTS
AND APPEND A NEW ONE BASED ON THE ARTICLE.info DIV, BUT HOW
*/
$('.selected').removeClass('selected');
$('a[href=#' + $active.attr('id') + ']').addClass('selected');
});