Есть меня такое меню
<nav>
<ul class="menu ind">
<li><a href="#we">Почему мы</a></li>
<li><a href="#works">Наши работы</a></li>
<li><a href="#services" class="dd-menu dot">Услуги</a>
<ul class="dropdown-menu ind">
<li><a href="#brow">Брови</a></li>
<li><a href="#lash">Ресницы</a></li>
<li><a href="#manicure">Маникюр</a></li>
<li><a href="#hair">Волосы</a></li>
<li><a href="#makeup">Makeup</a></li>
</ul>
</li>
<li><a href="#masters">Мастера</a></li>
<li><a href="#footer">Контакты</a></li>
</ul>
</nav>
И скрипт который подсвечивает пункт меню когда нахожусь в соответствующем блоке
$(document).ready(function () {
$(document).on("scroll", onScroll);
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('nav a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition
&& refElement.position().top + refElement.height() > scrollPosition) {
$('nav ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
Но скрипт подсвечивает только до пункта "Услуги" включительно, а после перестает подсвечивать оставшиеся пункты. Я думаю всё виной, то, что моё основное меню содержит выпадающее подменю (ul внутри ul). Как правильно подправить код jQuery, чтобы всё работало с выпадающим меню?
Простой
