У меня есть некоторый JQuery, который добавляет класс active
к навигационной ссылке навигационной панели, когда пользователь прокручивает этот раздел или выбирает их на навигационной панели. До сих пор это прекрасно работало, однако теперь я изменил структуру сайта так, чтобы панель навигации содержала раскрывающееся меню.
Я бы хотел адаптировать свой сценарий, чтобы родитель оставался выбранным при прокрутке любого из дочерних элементов. (поскольку выпадающий список вряд ли будет виден), и он частично работает. Однако, если я установлю атрибут href для родителя, раскрывающийся список не откроется. Если я удаляю этот href, то выпадающий список работает, но родительский объект устанавливается как активный!
HTML
JQuery
$(document).ready(function() {
//Initialise scrolling
var scroll = new SmoothScroll('a[href*="#"][data-scroll]', {
header: '[data-scroll-header]',
});
//Change navbar active class
$(window).scroll(function (event) {
var scrollPos = $(document).scrollTop();
if (scrollPos === 0)
{
$('a[href^="#home"]').addClass('active');
return;
}
$('.nav-item a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top - 78 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.nav-item a').removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
})
});