Javascript 单页网站上的复杂活动状态导航
HTML: 我需要实现以下目标:Javascript 单页网站上的复杂活动状态导航,javascript,jquery,navigation,Javascript,Jquery,Navigation,HTML: 我需要实现以下目标: 单击菜单项后的经典活动状态。。我已经用js的第一行实现了这一点 我想在页面滚动上也触发活动状态。因此,如果我滚动到#contact部分,活动状态将更改为“contact”菜单项 我还需要,如果我点击“.logo ribbon a”,则“活动状态导航”将在导航中的任何位置删除 你是说scrollspy?检查这里 //缓存选择器 var lastId, topMenu=$(“#top menu”), topMenuHeight=topMenu.outerHeigh
- 单击菜单项后的经典活动状态。。我已经用js的第一行实现了这一点
- 我想在页面滚动上也触发活动状态。因此,如果我滚动到#contact部分,活动状态将更改为“contact”菜单项
- 我还需要,如果我点击“.logo ribbon a”,则“活动状态导航”将在导航中的任何位置删除
- 你是说scrollspy?检查这里
//缓存选择器
var lastId,
topMenu=$(“#top menu”),
topMenuHeight=topMenu.outerHeight()+15,
//所有列表项
menuItems=topMenu.find(“a”),
//与菜单项相对应的锚定
scrollItems=menuItems.map(函数(){
var item=$($(this.attr(“href”));
if(item.length){return item;}
});
//将单击处理程序绑定到菜单项
//所以我们可以得到一个奇特的卷轴动画
菜单项。单击(函数(e){
var href=$(this.attr(“href”),
offsetTop=href==“#”?0:$(href).offset()。顶部菜单高度+1;
$('html,body').stop().animate({
滚动顶:偏置
}, 300);
e、 预防默认值();
});
//绑定到滚动
$(窗口)。滚动(函数(){
//获取容器滚动位置
var fromTop=$(this.scrollTop()+topMenuHeight;
//获取当前滚动项目的id
var cur=scrollItems.map(函数(){
if($(this).offset().top
<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>
$('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');
});
});
// 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");
}
});