I choose a menu item, then I return to the top, to the main one - the menu item remains highlighted. I ask you to help with the solution of tracking menu items enter image description here

<ul class="horizontal-nav trigger-victim"> <li><a href="#main" class="active go_to">Главная</a></li> <li><a href="#catalog" class="go_to">Каталог</a></li> <li><a href="#about" class="go_to">О компании</a></li> <li><a href="#delievery" class="go_to">Доставка и оплата</a></li> <li><a href="#contacts" class="go_to">Контакты</a></li> </ul>
  • and what specifically do you want when you go to another point, the selection disappears? - Oleksandr
  • Yes, i.e. I go to the "contacts" item and the selection of "delivery and payment" disappears, and the "contacts" appear - stiv

1 answer 1

 $(window).scroll(function(){ $('section').each(function(){ if($(this).offset().top<$(window).scrollTop()+1){ var currentclass =$(this).attr('id'); $('.active').removeClass('active'); $('a[href="#'+currentclass+'"]').addClass('active'); } }) }) 
 section{ height:900px; } .active{ background:red; } .horizontal-nav{ position:fixed; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="horizontal-nav trigger-victim"> <li><a href="#main" class="active go_to">Главная</a></li> <li><a href="#catalog" class="go_to">Каталог</a></li> <li><a href="#about" class="go_to">О компании</a></li> <li><a href="#delievery" class="go_to">Доставка и оплата</a></li> <li><a href="#contacts" class="go_to">Контакты</a></li> </ul> <section id=main></section> <section id=catalog></section> <section id=about></section> <section id=delievery></section> <section id=contacts></section>