Hello, I need to be able to hang on the id="active" section and when scrolling to this section, the menu item I need changes color from black to green. That is, you need a script that will determine when I'm in the section with id="active" and will change the color of one menu item. Simply put, this is something like a dependency:

1 section - changes color 1 menu item;

2 section - changes color 2 menu item;

3 section - changes color 3 menu item.

Thank you in advance

Closed due to the fact that the essence of the question is not clear to the participants Alexey Shimansky , Cheg , user207618, br3t , Darth 4 Aug '17 at 12:50 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • one
    Have you tried to do something yourself? Or do you want to get a ready answer right away? - Arsen

1 answer 1

There are many options, here's one of them:

 $(document).ready(function() { $(document).on('scroll', onScroll); // Плавная анимация $('a[href^="#"]').on('click', function(e) { e.preventDefault(); $(document).off('scroll'); $('a').each(function() { $(this).removeClass('active'); }); $(this).addClass('active'); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top + 2 }, 500, 'swing', function() { window.location.hash = target; $(document).on('scroll', onScroll); }); }); }); function onScroll() { var scrollPos = $(document).scrollTop(), link = $('#menu-center').find('a'); link.each(function() { var currLink = $(this), refElement = $(currLink.attr('href')); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { link.removeClass('active'); currLink.addClass('active'); } else { currLink.removeClass('active'); } }); } 
 *, *::before, *::after { box-sizing: border-box; } body, html { font-family: Arial, sans-serif; margin: 0; padding: 0; height: 100%; width: 100%; } .container { margin: 0 auto; max-width: 960px; } .menu { background-color: rgba(4, 180, 49, 0.6); position: fixed; transition: all 0.4s ease; width: 100%; } #menu { margin: 0; padding: 0; } #menu li { float: left; list-style: none; } #menu a { color: #000; display: inline-block; font-size: 14px; line-height: 75px; padding: 0 40px; text-decoration: none; } #menu .active, #menu a:hover { background-color: rgba(0, 0, 0, 0.12); color: #fff; } section { padding: 100px 25px 25px; } #home { background-color: #286090; height: 100vh; } #portfolio { background: gray; height: 100vh; } #about { background-color: #07c; height: 100vh; } #contact { background-color: rgb(154, 45, 45); height: 100vh; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <div class="container"> <ul id="menu"> <li><a href="#home" class="active">Главная</a></li> <li><a href="#portfolio">Портфолио</a></li> <li><a href="#about">О нас</a></li> <li><a href="#contact">Контакт</a></li> </ul> </div> </div> <section id="home"> <div class="container"> Главная </div> </section> <section id="portfolio"> <div class="container"> Портфолио </div> </section> <section id="about"> <div class="container"> О нас </div> </section> <section id="contact"> <div class="container"> Контакт </div> </section>

For bootstrap there is such a ready solution:

https://github.com/BlackrockDigital/startbootstrap-scrolling-nav

  • Thank you for unsubscribing, you have a good code, but not exactly what you need, I wanted the menu items to be highlighted not only when they were pressed, but at the scroll itself, that is, to make it dependent on being in a section and if I scrolled to the About, section then the corresponding menu item should be highlighted. If you help, I will be unrealistically grateful - LiEm