我在单页Wordpress网站中使用了此脚本的略微修改版本: Change Active Menu Item on Page Scroll?
我改变的是菜单UL id,topMenuHeight和滚动的持续时间。由于某种原因,前两个项目正在工作 - 从即将滚动到服务工作,但在那之后,没有。我正在输出'id'var到控制台,它总是显示服务。不太确定是什么。
答案 0 :(得分:0)
就个人而言,我没有直接回答必须更改菜单顺序的原因,但如果你改变CSS的设计方式,它可以解决你的问题。
如前所述,您需要确保'li'链接全部按正常顺序列出。
从这一点来说,如果你修复一些CSS,你可以操纵它看起来一样。
如果你将第27-28行更改为:
,请在CSS中#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {float: left; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}
基本上不是将#menu-main-menu li设置为向右浮动,而是将菜单更改为向右浮动,菜单向左浮动以将其设置为正确的顺序。
在#menu-main-menu里面我添加了
float:right;
并在#menu-main-menu li里面我改变了浮动:右转到
float:left;
如果您想在此处查看代码,请转到:http://jsfiddle.net/GpjMc/1/
你也可以让它显示内联而不是float:left。无论哪种格式最适合您。
#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {display: inline; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}
答案 1 :(得分:0)
您可以使用jQuery航点
http://imakewebthings.com/jquery-waypoints/
然后在滚动到特定元素时使用jquery更改活动类
$('.thing').waypoint(function(direction) {
jQuery("li.someItem").addClass("active");
});
答案 2 :(得分:0)
你得到了包含列表项的导航菜单,你只需要给你的ul一个id(在这种情况下:top-menu)
在你的html中输入下一个代码:
<ul id="top-menu">
<li class="active"><a href="#">item1</li>
<li class=""><a href="#">item2</li>
<li class=""><a href="#">item3</li>
<li class=""><a href="#">item4</li>
<li class=""><a href="#">item5</li>
</ul>
在你的jquery文件中输入下一个代码:
// 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
}, 1000);
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");
}
});
就是这样。 topmenu var中的id与你的ul中的id相同(在本例中为#top-menu )topMenu = $(&#34; #top-menu & #34)