更改具有多个菜单的滚动上的活动菜单项

Question

I have a single page scrolling website and would like to change the active class of my links on both scroll and click. I've found some great snippets from this website which do half the job (for those that are interested this also does smooth scrolling):

 $(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(); $('a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); } 

The problem arises in that I have multiple menus that are visible at different screen sizes. I'm struggling with a way to change the active class on both menu items simultaneously.

Any suggestions would be greatly appreciated

Answer 1

Solved this myself but I would welcome a cleaner solution. I simply duplicated the code:`

 $(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('#nav-minor a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('#nav-minor 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 scrollPo = $(document).scrollTop(); $('#nav-minor a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPo && refElement.position().top + refElement.height() > scrollPo) { $('#nav-minor a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); } 

albeit with different ID's for the secondary menu:

 $(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('#nav-main li a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('#nav-main li').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(); $('#nav-main li a').each(function () { var currItem = $(this); var refElement = $(currItem.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#nav-main li a').removeClass("active"); currItem.addClass("active"); } else{ currItem.removeClass("active"); } }); } 

If anyone has a better answer to this would be appreciated. Purely for academic reasons now :-)`