更改页面滚动上的活动菜单项？
这个function的一个很好的例子可以在这里看到： http : //www.maddim.com/demos/spark-r6/
当您向下滚动页面时，活动菜单项目会更改。 这是怎么做的？
它通过绑定到容器的滚动事件 （通常是窗口）来完成。
快速示例：
// 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"); }); 看到在jsFiddle行动上面包括滚动animation。
只需检查我的代码和狙击手和演示链接：
// Basice Code keep it $(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); // Use Your Class or ID For Selection function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#menu-center a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#menu-center ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }
现场演示
$(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#menu-center a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#menu-center ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }
body, html { margin: 0; padding: 0; height: 100%; width: 100%; } .menu { width: 100%; height: 75px; background-color: rgba(0, 0, 0, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .light-menu { width: 100%; height: 75px; background-color: rgba(255, 255, 255, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } #menu-center { width: 980px; height: 75px; margin: 0 auto; } #menu-center ul { margin: 0 0 0 0; } #menu-center ul li a{ padding: 32px 40px; } #menu-center ul li { list-style: none; margin: 0 0 0 -4px; display: inline; } .active, #menu-center ul li a:hover { font-family:'Droid Sans', serif; font-size: 14px; color: #fff; text-decoration: none; line-height: 50px; background-color: rgba(0, 0, 0, 0.12); padding: 32px 40px; } a { font-family:'Droid Sans', serif; font-size: 14px; color: black; text-decoration: none; line-height: 72px; } #home { background-color: #286090; height: 100vh; width: 100%; overflow: hidden; } #portfolio { background: gray; height: 100vh; width: 100%; } #about { background-color: blue; height: 100vh; width: 100%; } #contact { background-color: rgb(154, 45, 45); height: 100vh; width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- <div class="container"> ---> <div class="m1 menu"> <div id="menu-center"> <ul> <li><a class="active" href="#home">Home</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> </div> <div id="home"></div> <div id="portfolio"></div> <div id="about"></div> <div id="contact"></div>
只是为了补充@马库斯·埃克沃尔的答案。 这样做只会得到锚链接。 如果你有固定链接和普通链接，你不会有问题。
jQuery(document).ready(function(jQuery) { var topMenu = jQuery("#top-menu"), offset = 40, topMenuHeight = topMenu.outerHeight()+offset, // All list items menuItems = topMenu.find('a[href*="#"]'), // Anchors corresponding to menu items scrollItems = menuItems.map(function(){ var href = jQuery(this).attr("href"), id = href.substring(href.indexOf('#')), item = jQuery(id); //console.log(item) if (item.length) { return item; } }); // so we can get a fancy scroll animation menuItems.click(function(e){ var href = jQuery(this).attr("href"), id = href.substring(href.indexOf('#')); offsetTop = href === "#" ? 0 : jQuery(id).offset().top-topMenuHeight+1; jQuery('html, body').stop().animate({ scrollTop: offsetTop }, 300); e.preventDefault(); }); // Bind to scroll jQuery(window).scroll(function(){ // Get container scroll position var fromTop = jQuery(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if (jQuery(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 : ""; menuItems.parent().removeClass("active"); if(id){ menuItems.parent().end().filter("[href*='#"+id+"']").parent().addClass("active"); } }) })
基本上我换了
menuItems = topMenu.find("a"),
通过
menuItems = topMenu.find('a[href*="#"]'),
为了匹配所有链接锚点，并改变了所有必要的工作
看到它在jsfiddle上的行动
