Modifier l’élément de menu actif sur le défilement de la page?

Un bon exemple de cette fonctionnalité serait visible ici: http://www.maddim.com/demos/spark-r6/

Lorsque vous faites défiler la page, l’élément de menu actif change. Comment ça se passe?

Cela se fait en liant à l’événement scroll du conteneur (généralement la fenêtre).

Exemple rapide:

// 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"); });​ 

Voir ci-dessus en action à jsFiddle, y compris l'animation de défilement.

Il suffit de vérifier mon code et Sniper et lien de démonstration:

  // 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"); } }); } 

démo en direct

 $(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%; } 
    

Juste pour compléter la réponse de @Marcus Ekwall. Faire comme ça n’aura que des liens d’ancrage. Et vous n’allez pas avoir de problèmes si vous avez un mélange de liens d’ancrage et de liens réguliers.

 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.subssortingng(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.subssortingng(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"); } }) }) 

Fondamentalement, j'ai remplacé

 menuItems = topMenu.find("a"), 

par

 menuItems = topMenu.find('a[href*="#"]'), 

Pour faire correspondre tous les liens avec ancre quelque part, et changé tout ce qui était nécessaire pour le faire fonctionner avec cela

Voir en action sur jsfiddle