Изменение активного пункта меню на прокрутке с несколькими меню

Question

У меня есть веб-сайт с прокруткой страниц и вы хотите изменить активный класс моих ссылок как по прокрутке, так и по щелчку. Я нашел некоторые большие фрагменты этого сайта, которые делают половину работы (для тех, кто заинтересован в этом также делает плавный скроллинг):

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

Проблема возникает в том, что у меня есть несколько меню которые видны при разных размерах экрана. Я изо всех сил пытаюсь изменить активный класс на оба пункта меню одновременно.

Любые предложения будут высоко оценены

Answer 1

решаемые это сам, но я хотел бы получить более чистое решение. Я просто скопировал код: `

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

хотя и с разными идентификаторами вспомогательного меню:

$(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"); 
 
     } 
 
\t }); 
 
}

Если у кого есть лучший ответ на этот вопрос будет оценена. Чисто по академическим причинам сейчас :-) `