Реализация плавающей линии под элементами меню

Question

Всем привет. на сайте есть меню, состоящее из нескольких элементов(слов)) Пытаюсь сделать так, чтобы при наведении на текст - "пункт меню", появлялась линия под ним и перемещалась при наведении на другой элемент меню. Это вроде как сделал, но при скролле, эта линия начинает перемещаться с экраном, т.е. не остается под текстом, пока не наведешь снова. Не могу понять, что нужно в коде дописать, чтобы она постоянно находилась под текстом. ниже код JS и HTML

// create line under menu
// получаем все меню состоящее из элементов
const menu = document.querySelector('.menu__list');
// получаем блок, который будет перемещаться под выбранным элементом меню
const menuLine = document.querySelector('.menu__line');

document.addEventListener('mouseover', function (e) {
    const hoverItemMenu = e.target;
    if (hoverItemMenu.closest('.menu__link')) {

        //получаем положение элемета на который навели
        const hoverItemMenuPageX = hoverItemMenu.getBoundingClientRect();
        //добавим позиционирование полосы
        menuLine.style.cssText = "position:fixed;";

        //устанавливаем координаты полосы
        menuLine.style.left = hoverItemMenuPageX.left + "px";
        menuLine.style.top = hoverItemMenuPageX.bottom + "px";
        menuLine.style.width = hoverItemMenuPageX.width + "px";

        //добавляем класс
        e.target.classList.add('_choosen');

        //убираем класс
        hoverItemMenu.onmouseout = function (event) {
            let targetOut = event.target;
            e.target.classList.remove('_choosen');
        };
    }
})

<div class="first-line__cover-left">
                    <a href="" class="first-line__logo">
                        <div class="first-line__image"><img data-src="img/header/header_logo.svg" alt="Картинка"></div>
                        <div class="first-line__text">Orion</div>
                    </a>
                    <div class="first-line__menu menu">
                        <nav class="menu__body">
                            <ul class="menu__list">
                                <li class="menu__item"><a href="" class="menu__link">Home</a>
                                </li>
                                <li class="menu__item"><a href="" class="menu__link">Solutions</a></li>
                                <li class="menu__item"><a href="" class="menu__link">Features</a></li>
                                <li class="menu__item"><a href="" class="menu__link">Resources</a></li>
                                <div class="menu__line"></div>
                            </ul>
                        </nav>
                    </div>
                </div>

БЛОГ НА HUSL

Реализация плавающей линии под элементами меню

Ответы (0 шт):