我有一种单页网站,它使用标准 ul 菜单作为导航,然后在移动设备上使用选择菜单。我已经整理了如何根据可见/滚动到 div 设置“活动”菜单项,但不确定如何更改活动选项以达到相同的效果。我在这里设置了一个小提琴供您查看我到目前为止的位置。代码也在下面
// This function will be executed when the user scrolls the page.
$(window).scroll(function(e) {
// Get the position of the location where the scroller starts.
var scroller_anchor = $(".scroller_anchor").offset().top;
// Check if the user has scrolled and the current position is after the scroller's start location and if its not already fixed at the top
if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
{ // Change the CSS of the scroller to hilight it and fix it at the top of the screen.
$('.scroller').addClass('sloozis');
// Changing the height of the scroller anchor to that of scroller so that there is no change in the overall height of the page.
$('.scroller_anchor').css('height', '50px');
}
else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
{ // If the user has scrolled back to the location above the scroller anchor place it back into the content.
// Change the height of the scroller anchor to 0 and now we will be adding the scroller back to the content.
$('.scroller_anchor').css('height', '0px');
// Change the CSS and put it back to its original position.
$('.scroller').removeClass('sloozis');
}
var lastId,
topMenu = $(".nav"),
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; }
});
// 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");
}
});
$(document).ready(function(e) {
$('#nav ul li a').bind('click', function(e) {
e.preventDefault();
$('html,body').animate({scrollTop: $(this.hash).offset().top});
});
});