向下滚动页面时,活动菜单项将更改。怎么做?
通过绑定到容器的滚动事件(通常是窗口)来完成。
快速示例:
// Cache selectors var 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 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 : ""; // Set/remove active class menuItems .parent().removeClass("active") .end().filter("[href='#"+id+"']").parent().addClass("active"); });