0

On my site I have a menu on the right. When I scroll down the menu and I come down, the background page scrolls too.

I would like the page in the background does not scroll. How to do this ?

Here is a page of my site, click on the menu on the right:

https://www.s1biose.com/recette

enter image description here

3cfe5693
  • 57
  • 1
  • 9

1 Answers1

2

You can disable scrolling in many ways:

With CSS:

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

This will disable scrolling and bring you to the top of the page.

Alternatively, you can use JavaScript (jQuery) to:

$(document).ready(function(){
  $(".navbar-toggle-second[aria-expanded='false']").click(function(e) {
    e.preventDefault();
    $("body").css("overflow", "hidden");
  });

  $(".navbar-toggle-second[aria-expanded='true']").click(function(e) {
    e.preventDefault();
    $("body").css("overflow", "auto");
  });
});

For more information, see this:

How to programmatically disable page scrolling with jQuery

Robert Wolf
  • 1,312
  • 13
  • 18
  • What I'm trying to do is block the scrolling of the content behind the collapse menu. When the menu is open. – 3cfe5693 Jan 19 '18 at 00:03
  • The following code looks good https://forum.webflow.com/t/how-to-prevent-body-from-scrolling-when-modal-window-open/29959/3 in the case of my menu, what should I put in my JS file ? – 3cfe5693 Jan 20 '18 at 06:30
  • I've edited the code so it should work for your case. Make sure to include jQuery – Robert Wolf Jan 21 '18 at 20:30
  • what I want to do is when the menu is open, the content behind should not scroll, should not be clickable and must be darkened. – 3cfe5693 Jan 21 '18 at 21:23
  • I want the behavior to be modal – 3cfe5693 Jan 21 '18 at 21:24
  • https://www.s1biose.com/profil/adeline on this page if you click on "Signaler un problème" under the profile, a modal window opens and the content behind gets darker, is not clickable and you can not scroll down. That's what I'm trying to do with the menu collapse. – 3cfe5693 Jan 21 '18 at 21:31
  • When I open your example, it's working. Is the problem solved then? – Robert Wolf Jan 22 '18 at 12:39