Good day dear. I understand the navigation on the one-page questions, I really hope that you tell me how to solve. Example:

window.onload=function(){ var navigateMenu = $(".slider-nav-menu"), activeMenu = $(".menu-active"); console.log($(".slider-nav-menu a").length + " = elem"); navigateMenu.on("click", $("li"), function(){ $(this).find("a").removeClass("menu-active"); $(this).find("a").addClass("menu-active"); }); } 
 .block{ position: relative; width: 100%; height: 400px; border: 1px solid #000; } #block1{ background-color: #f00; } #block2{ background-color: #0f0; } #block3{ background-color: #0ff; } #block4{ background-color: #f0f; } #block5{ background-color: #ff0; } h1{ margin: 25% 0 0 50%; text-decoration: none; } ul{ list-style-type: none; } .slider-nav { position: fixed; right: 5%; top: 50%; width: 50px; height: 100px; z-index: 100; } .slider-nav-menu li:nth-child(even) a { background-color: black; } .slider-nav-menu li:nth-child(odd) a { background-color: yellow; } .slider-nav-menu a { display: block; margin: 100% 0; width: 20px; height: 20px; border: 1px solid #000; border-radius: 50%; } a.menu-active { position: relative; transform: scale(1.4); transiton: transform 0.5s; } a.menu-active:after { position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; background-color: #fff; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="slider-nav"> <ul class="slider-nav-menu"> <li><a class="menu-active" href="#block1"></a></li> <li><a class="" href="#block2"></a></li> <li><a class="" href="#block3"></a></li> <li><a class="" href="#block4"></a></li> <li><a class="" href="#block5"></a></li> </ul> </nav> <div id="block1" class="block"><h1>TEST1</h1></div> <div id="block2" class="block"><h1>TEST2</h1></div> <div id="block3" class="block"><h1>TEST3</h1></div> <div id="block4" class="block"><h1>TEST4</h1></div> <div id="block5" class="block"><h1>TEST5</h1></div>

1) How to assign the menu-active class only to the link to which it was clicked, before removing this class from all the others? 2) How to implement adding this class when scrolling the site? (I scrolled to section 3, my 3rd circle increased, and disappeared from the second), while the block sizes in a real project are different.

    1 answer 1

    First , you have an error in on()

    The second parameter is the selector, not the jQuery object:

     navigateMenu.on("click", "li", function() {

    Answer to 1 question

    1) How to assign the menu-active class only to the link to which it was clicked, before removing this class from all the others?

    I answered this question here: How can I add classes to the parent and child in jquery, and remove similar classes from neighbors?

    In your case, I will do this:

     navigateMenu.find("a").removeClass("menu-active"); $(this).find("a").addClass("menu-active");

    Answer to question 2

    2) How to implement the addition of this class when scrolling the site?

    It is necessary to handle the onScroll event.

    You can find out the current position of a scroll using $(window).scrollTop() , and the position of an object (section) relative to a document using .offset()

    Working code

     var navigateMenu = $(".slider-nav-menu"); $(window).load(function() { console.log($(".slider-nav-menu a").length + " = elem"); navigateMenu.on("click", "li", function() { navigateMenu.find("a").removeClass("menu-active"); $(this).find("a").addClass("menu-active"); }); }) $(window).scroll(function() { var scrolltop = $(window).scrollTop() $('.block').each(function(n) { if (scrolltop > $(this).offset().top && scrolltop < $(this).offset().top + $(this).height()) { navigateMenu.find("a").removeClass("menu-active"); navigateMenu.find("a").eq(n).addClass("menu-active"); } }) }) 
     .block { position: relative; width: 100%; height: 400px; border: 1px solid #000; } #block1 { background-color: #f00; } #block2 { background-color: #0f0; } #block3 { background-color: #0ff; } #block4 { background-color: #f0f; } #block5 { background-color: #ff0; } h1 { margin: 25% 0 0 50%; text-decoration: none; } ul { list-style-type: none; } .slider-nav { position: fixed; right: 5%; top: 50%; width: 50px; height: 100px; z-index: 100; } .slider-nav-menu li:nth-child(even) a { background-color: black; } .slider-nav-menu li:nth-child(odd) a { background-color: yellow; } .slider-nav-menu a { display: block; margin: 100% 0; width: 20px; height: 20px; border: 1px solid #000; border-radius: 50%; } a.menu-active { position: relative; transform: scale(1.4); transiton: transform 0.5s; } a.menu-active:after { position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; background-color: #fff; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="slider-nav"> <ul class="slider-nav-menu"> <li> <a class="menu-active" href="#block1"></a> </li> <li> <a class="" href="#block2"></a> </li> <li> <a class="" href="#block3"></a> </li> <li> <a class="" href="#block4"></a> </li> <li> <a class="" href="#block5"></a> </li> </ul> </nav> <div id="block1" class="block"> <h1>TEST1</h1> </div> <div id="block2" class="block"> <h1>TEST2</h1> </div> <div id="block3" class="block"> <h1>TEST3</h1> </div> <div id="block4" class="block"> <h1>TEST4</h1> </div> <div id="block5" class="block"> <h1>TEST5</h1> </div>