单页网站上的复杂活动状态导航
complex active state navigation on single page website
HTML:
<div class="logo-ribbon">
<a href="#top"></a>
</div>
<nav id="nav">
<ul>
<li class="what">
<a href="#what">what </a>
</li>
<li class="how">
<a href="#how">how </a>
</li>
<li class="projects">
<a href="#projects">projects</a>
</li>
<li class="faq">
<a href="#faq">faq</a>
</li>
<li class="contact">
<a href="#contact">contact</a>
</li>
</ul>
</nav>
.JS:
$('nav li a').click(function(e) {
e.preventDefault();
$('a').removeClass('active-state-navigation');
$(this).addClass('active-state-navigation');
$('logo-ribbon a').click(function(){
$('nav li').removeClass('active-state-navigation');
});
});
我需要实现的是以下内容:
一旦你点击一个菜单项,一个经典的活动状态..我已经通过JS的第一行实现了
我希望在页面滚动时也触发活动状态。 这样,如果我滚动到 #contact 部分,活动状态将更改为"联系人"菜单项
我还需要它,如果我单击".logo-ribbon a","活动状态导航"将在导航中的任何位置删除。
你是说卷轴?在这里查看 http://jsfiddle.net/mekwall/up4nu/
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
相关文章:
- 在Angular 2中布线期间保持零部件处于活动状态
- 引导导航活动状态不起作用
- 如何将活动状态类动态更改(添加)到导航链接
- 获取左侧导航链接以保持打开和活动状态
- Angular 2 即使没有导航到它也能保持路线活动状态
- 根据点击次数写入导航的活动状态
- 尝试在滚动子导航时保持父导航处于活动状态
- 单页网站粘性导航:更改内容元素的活动状态
- Zurb Foundation Top Bar & jQuery - 检查移动导航是否处于活动状态
- 如何设置导航栏的活动状态
- 如何使所选导航按钮保持活动状态
- 更改固定页面导航的活动状态
- 单页网站上的复杂活动状态导航
- 在车把部分中设置导航菜单项为活动状态
- 在用户滚动时为链接中的导航添加活动状态
- 在导航选项卡上切换为活动状态
- 引导导航条子菜单活动状态不工作
- 导航按钮未重置为非活动状态
- 删除后导航栏单击持续的活动状态 JQuery Mobile
- 页面刷新后导航上的活动状态