Как отключить прокрутку при нажатии на меню гамбургера? Затем снова включите прокрутку, когда опция выбрана в меню навигации.

Question

Полагаю, у меня достаточно приличные знания HTML, CSS и JS. Тем не менее, я застрял на одной маленькой ошибке. Всякий раз, когда я щелкаю по значку меню гамбургера, появляется наложение, позволяющее пользователю перемещаться по моему веб-сайту. Мне удалось отключить прокрутку тела при каждом щелчке меню гамбургера, однако, как только пользователь щелкает соответствующий тег привязки, перенося его в нужное место на веб-сайте, я хочу, чтобы прокрутка снова была включена.

Это может показаться небольшим исправлением, но я уже давно борюсь с этой ошибкой, и мой мозг сейчас чувствует себя жарким, смеется. Если кто-то может пролить свет на это, это будет высоко ценится.

Мой код указан ниже:

HTML:

        <header>
            <div class="container">
                <nav class="nav-container">
                    <div class="menu-toggle">
                        <i class="fas fa-bars" onclick="lockScroll();"></i>
                        <i class="fas fa-times"></i>
                    </div>
                    <ul class="nav-items nav-toggle" id="menu">
                        <li class="nav-links">
                            <a href="#" class="nav-link">Home</a>
                        </li>
                        <li class="nav-links">
                            <a href="#about-area" class="nav-link">About</a>
                        </li>
                        <li class="nav-links">
                            <a href="#project-area" class="nav-link">Projects</a>
                        </li>
                        <li class="nav-links">
                            <a href="#contact-area" class="nav-link">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

CSS:

.lock-scroll {
    overflow: hidden;
}

JavaScript:

function lockScroll() {
    if ($('body').hasClass('lock-scroll')) {
        $('body').removeClass('lock-scroll');
    } else {
        $('body').addClass('lock-scroll');
    }
}

Answer 1

Вы можете снова вызвать функцию удаления прокрутки по щелчку якоря:

$("a.nav-link").click(function(){
   $('body').removeClass('lock-scroll');
})