On click lock scrolling of menu overlay

Question

I have a menu div that is set to show when my burger menu is clicked. I am not sure how to apply the CSS / JS that would also allow me to stop scrolling when this is clicked on/off.

Currently the user can scroll down and lose the burger close button because they can scroll freely. Any ideas on how to do this and how to apply the code to say my burger menu eg below:

<a href="#" class="burger w-inline-block" data-ix="burger-click-2">
    <div class="burger-line-1"></div>
    <div class="burger-line-2"></div>
    <div class="burger-line-3"></div>
</a>

Answer 1

To prevent scrolling, you can set the style to overflow:hidden; on the html element. A good way to do this is to create a html.no-scroll class in your css and use jquery to toggle the class on and off.

You don't have enough code in your question to apply this directly, but here's an example that detects a click anywhere on the page to toggle scrolling behavior.

$('body').on('click', toggleScrolling);

function toggleScrolling() {
  $('html').toggleClass('no-scroll');
}

html.no-scroll {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia eget nisi nec pellentesque. Morbi feugiat nunc non sem accumsan dictum. Donec aliquam lacus nec libero placerat, in placerat lectus condimentum. Maecenas condimentum euismod mauris, vitae
  pharetra massa posuere id. Duis eget maximus tortor. Proin suscipit fermentum tellus id maximus. Aliquam scelerisque mauris elit, vel interdum lectus maximus luctus. Maecenas mattis sem ac eros ultrices posuere. Phasellus viverra imperdiet risus, in
  ultricies eros pulvinar at. Aliquam et faucibus lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Integer dapibus imperdiet felis, eget lobortis eros lobortis eget. Integer et tristique massa, id pellentesque metus. Morbi gravida sem sit amet eros aliquet, quis blandit libero iaculis. Nulla tempor, erat sed vulputate gravida, elit tellus interdum
  ante, at tristique tortor turpis quis turpis. Donec consequat ipsum eu felis fermentum, vitae iaculis leo ultricies. Cras dapibus mattis dui. Curabitur at hendrerit urna. Quisque eros lectus, laoreet quis ligula vel, aliquam viverra lacus. Mauris vehicula
  congue molestie. Aliquam a lectus ut nulla lobortis vulputate. Fusce porttitor, sapien quis eleifend hendrerit, ante neque pharetra nisi, a ultrices felis dolor ac nibh.</p>

<p>Nam feugiat eros in ante sodales, id ultrices turpis volutpat. Integer quis mi mi. Curabitur sem enim, vestibulum non arcu at, vestibulum mollis purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris
  euismod ante et arcu convallis maximus. Ut ligula libero, placerat non pellentesque eget, luctus sed elit. Nullam sapien lorem, vestibulum lobortis dapibus ut, ullamcorper at sem. Nunc ultrices ligula vel blandit fringilla.</p>

<p>Integer condimentum ullamcorper faucibus. Donec faucibus vestibulum nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras quis venenatis orci, sit amet semper sapien. Mauris blandit volutpat ipsum ut
  pulvinar. Quisque posuere commodo dui, in vestibulum ipsum molestie eget. Phasellus vel egestas mi. Fusce egestas risus quis nisl sagittis, in laoreet ante facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  Cras facilisis orci eget efficitur elementum. Suspendisse orci arcu, iaculis a nibh tincidunt, finibus eleifend orci. In ac venenatis leo. Vivamus sit amet augue tempus, vestibulum odio suscipit, auctor odio. Suspendisse sit amet posuere elit, nec placerat
  mi.
</p>

<p>Curabitur nunc elit, sollicitudin vitae ligula eu, eleifend cursus ante. Proin mi sapien, ultrices id faucibus ac, vehicula vitae lectus. Sed eros neque, molestie in nisi non, ullamcorper porta leo. Vivamus cursus tincidunt semper. Maecenas id faucibus
  dolor. Praesent faucibus tempor massa, vitae mollis nisl pretium a. In scelerisque ullamcorper neque, eget maximus tortor venenatis sit amet. Nullam sit amet dui at odio vulputate blandit id sit amet orci. Pellentesque gravida, quam sed efficitur sollicitudin,
  velit elit finibus felis, sit amet pellentesque nisl mauris non urna. Phasellus hendrerit nec ante ac molestie. Curabitur sed pulvinar mauris. Donec at volutpat sapien. Sed consectetur odio a ipsum ullamcorper dignissim.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia eget nisi nec pellentesque. Morbi feugiat nunc non sem accumsan dictum. Donec aliquam lacus nec libero placerat, in placerat lectus condimentum. Maecenas condimentum euismod mauris, vitae
  pharetra massa posuere id. Duis eget maximus tortor. Proin suscipit fermentum tellus id maximus. Aliquam scelerisque mauris elit, vel interdum lectus maximus luctus. Maecenas mattis sem ac eros ultrices posuere. Phasellus viverra imperdiet risus, in
  ultricies eros pulvinar at. Aliquam et faucibus lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Integer dapibus imperdiet felis, eget lobortis eros lobortis eget. Integer et tristique massa, id pellentesque metus. Morbi gravida sem sit amet eros aliquet, quis blandit libero iaculis. Nulla tempor, erat sed vulputate gravida, elit tellus interdum
  ante, at tristique tortor turpis quis turpis. Donec consequat ipsum eu felis fermentum, vitae iaculis leo ultricies. Cras dapibus mattis dui. Curabitur at hendrerit urna. Quisque eros lectus, laoreet quis ligula vel, aliquam viverra lacus. Mauris vehicula
  congue molestie. Aliquam a lectus ut nulla lobortis vulputate. Fusce porttitor, sapien quis eleifend hendrerit, ante neque pharetra nisi, a ultrices felis dolor ac nibh.</p>

<p>Nam feugiat eros in ante sodales, id ultrices turpis volutpat. Integer quis mi mi. Curabitur sem enim, vestibulum non arcu at, vestibulum mollis purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris
  euismod ante et arcu convallis maximus. Ut ligula libero, placerat non pellentesque eget, luctus sed elit. Nullam sapien lorem, vestibulum lobortis dapibus ut, ullamcorper at sem. Nunc ultrices ligula vel blandit fringilla.</p>

<p>Integer condimentum ullamcorper faucibus. Donec faucibus vestibulum nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras quis venenatis orci, sit amet semper sapien. Mauris blandit volutpat ipsum ut
  pulvinar. Quisque posuere commodo dui, in vestibulum ipsum molestie eget. Phasellus vel egestas mi. Fusce egestas risus quis nisl sagittis, in laoreet ante facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  Cras facilisis orci eget efficitur elementum. Suspendisse orci arcu, iaculis a nibh tincidunt, finibus eleifend orci. In ac venenatis leo. Vivamus sit amet augue tempus, vestibulum odio suscipit, auctor odio. Suspendisse sit amet posuere elit, nec placerat
  mi.
</p>

<p>Curabitur nunc elit, sollicitudin vitae ligula eu, eleifend cursus ante. Proin mi sapien, ultrices id faucibus ac, vehicula vitae lectus. Sed eros neque, molestie in nisi non, ullamcorper porta leo. Vivamus cursus tincidunt semper. Maecenas id faucibus
  dolor. Praesent faucibus tempor massa, vitae mollis nisl pretium a. In scelerisque ullamcorper neque, eget maximus tortor venenatis sit amet. Nullam sit amet dui at odio vulputate blandit id sit amet orci. Pellentesque gravida, quam sed efficitur sollicitudin,
  velit elit finibus felis, sit amet pellentesque nisl mauris non urna. Phasellus hendrerit nec ante ac molestie. Curabitur sed pulvinar mauris. Donec at volutpat sapien. Sed consectetur odio a ipsum ullamcorper dignissim.</p>