При нажатии на один и белых кружков вертикальной навигации, активный должен гореть белым, но когда я нажимаю на второй кружок, который соответствует секции "О нас ", то осуществляется переход к этой секции, но почему-то кружок не становится белым и я не могу понять почему. Так же не понятно почему он не сменяет цвет при скроллинге страницы на следующую секцию, может где-то ошибка в js коде?Сам сайт ilyin1ib.beget.techВесь код https://jsfiddle.net/bhkjudvL/ <nav class="navbar"> <ul> <li> <a href="#main" class="dot active" data-scroll="main"> <span>Главная</span> </a> </li> <li> <a href="#about_us" class="dot" data-scroll="about_us"> <span>О нас</span> </a> </li> </ul> </nav> <section id="main" class="main"> <div class="wrapper"> <div class="content"> <p class="main-title"> Нам Вы можете полностью доверить создание, доработку и продвижение сайта. </p> <h1>Первая веб-студия с постоплатой по<br>факту выполненной работы</h1> <button class="btn-main open-popup"><span>Оставить заявку</button> </div> </div> </section> <section id="about_us" class="about_us"> <div class="wrapper"> <div class="content"> <div class="inverted"> <h2>Веб-студия Inter-web – это<br>возможность <span class="pink">заявить о себе</span></h2> </div> <div class="features"> <h4>Мы всегда отслеживаем новые тенденции и на их основе предлагаем уникальные предложения. </h4> <div class="features-block"> <div class="quantity_block"> <span class="quantity_numbers one">10</span> <span class="quantity_text">лет на рынке</span> </div> <div class="desc"> <p>Агентство “Inter-web” существует на рынке более *n* лет. За все время работы мы успели построить доверительные отношения со всеми клиентами и показать весь наш профессионализм в работе.</p> </div> </div> <div class="features-block"> <div class="quantity_block"> <span class="quantity_numbers two">75</span> <span class="quantity_text">специалистов в<br>штате</span> </div> <div class="desc"> <p>У нас идет строгий отбор сотрудников фирмы. В агентстве “Inter-web” работают исключительно профессионалы своего дела.</p> </div> </div> <div class="features-block"> <div class="quantity_block"> <span class="quantity_numbers three">150</span> <span class="quantity_text">выполненных<br>проектов</span> </div> <div class="desc"> <p>За плечами более *количество* успешно сделанных и работающих сайтов.</p> </div> </div> </div> </div> </section> .navbar { position: fixed; top: 50%; right: 120px; transform: translateY(-50%); z-index: 1000; } .navbar ul li { width: 200px; position: relative; text-align: right; } .navbar ul li .dot { color: #fff; display: block; padding: 5px 0; } .navbar ul li .dot span { display: inline-block; background: #fff; color: black; letter-spacing: 1px; padding: 10px 25px; margin-right: 30px; border-radius: 3px; transform: translateX(30px); opacity: 0; } .navbar ul li:hover .dot span { transform: translateX(0px); opacity: 1; } .navbar ul li .dot span::before { content: ''; position: absolute; top: 50%; right: 0; transform: translate(7px, -50%); border-left: 7px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; display: block; } .navbar ul li .dot::before, .navbar ul li .dot::after { content: ''; position: absolute; top: 50%; border-radius: 50%; display: block; transition: .2s ease-out; } .navbar ul li .dot::before { height: 15px; width: 15px; border: 1px solid #fff; right: 0; transform: translateY(-50%); } .navbar ul li .dot.active::before { background-color: #fff; } .navbar ul li:hover .dot::before { border: 3px solid #fff; } $(window).on('scroll',function(){ var link = $('.navbar a.dot'); var top = $(window).scrollTop(); $('section').each(function(){ var id = $(this).attr('id'); var height = $(this).height(); var offset = $(this).offset().top - 150; if(top >= offset && top < offset + height){ link.removeClass('active'); $('.navbar').find('[data-scroll="' + id + '"]').addClass('active'); } }); });