1

I believe I have some fairly decent knowledge of HTML, CSS, and JS. However, I am stuck on one little bug. Whenever I click my hamburger menu icon, an overlay appears giving the user options to navigate throughout my website. I have managed to disable the scrolling of the body whenever the hamburger menu is clicked, however, once the user clicks the appropriate anchor tag, taking them to their desired location on the website, I want scrolling re-enabled.

It may seem like a little fix but I've been battling with this bug for quite some time and my brain feels fried right now lol. If anyone can shed some light on it, it'll be much appreciated.

My code is below:

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');
    }
}
ehsaan ali
  • 51
  • 2
  • 7
  • https://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery Does this answer your question ? – clota974 Apr 04 '20 at 21:51
  • I was editing your question (transforming the code to a snippet) and it worked just fine. – D. Pardal Apr 04 '20 at 21:51

1 Answers1

1

You can call the remove scroll function again on anchor click:

$("a.nav-link").click(function(){
   $('body').removeClass('lock-scroll');
})
Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
  • 1
    The solution worked perfectly, I tried that myself but I was using "onClick" instead of ".click". A rookie mistake lol. I appreciate the help anyways. Thank you so much! – ehsaan ali Apr 04 '20 at 21:58