Cambia la voce del menu attivo sullo scroll della pagina?

Un buon esempio di questa funzionalità potrebbe essere visto qui: http://www.maddim.com/demos/spark-r6/

Mentre scorri verso il basso nella pagina, la voce di menu triggers cambia. Come è fatto?

È fatto legandosi all’evento di scorrimento del contenitore (solitamente finestra).

Esempio veloce:

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

Vedi sopra in azione su jsFiddle inclusa l'animazione a scorrimento.

Basta controllare il mio codice e il link Sniper e demo:

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

demo live

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

Solo per completare la risposta di @Marcus Ekwall. In questo modo otterrete solo collegamenti di ancoraggio. E non avrai problemi se hai un mix di link di ancoraggio e regolari.

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

Fondamentalmente ho sostituito

 menuItems = topMenu.find("a"), 

di

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

Per abbinare tutti i collegamenti con l'ancora da qualche parte, e ha cambiato tutto ciò che era necessario per farlo funzionare con questo

Guardalo in azione su jsfiddle