There is a code. I need to add a function (as I understand it, this is done via JS), which, when opening the menu, does not allow the user to scroll down / up the page, and when closed, would return this feature.

$(document).ready(function () { $('.menu-toggle').click(function () { $('nav').toggleClass('active'); }) }) 
 body, html { width: 100%; height: 100%; padding: 0; margin: 0; font-family: Arial; } header { position: fixed; top: 0; left: 0; padding: 0 20px; background-color: #fff; width: 100%; box-sizing: border-box; } header .logo { padding-top: 10px; height: 50px; float: left; } header nav { float: right; padding-right: 20px; } header nav ul { margin: 0; padding: 0; display: flex; } header nav ul li { list-style: none; } header nav ul li a { height: 70px; line-height: 70px; padding: 0 30px; color: black; text-decoration: none; display: block; font-size: 20px; } header nav ul li a:hover, header nav ul li a.active { color: black; border-bottom: 5px solid greenyellow; } header .menu-toggle { color: #FF3032; float: right; line-height: 70px; cursor: pointer; display: none; } @media (max-width: 991px) { header { width: 100%; padding: 0 20px; margin: 0; } header .menu-toggle { display: block; } header nav { margin: 0; padding: 0; position: absolute; width: 100%; height: 100vh; background-color: #fff; top: 70px; left: -110%; transition: .5s; } header nav ul { display: block; text-align: center; border-top: 2px solid rgba(0, 0, 0, 0.2); } header nav ul li a { border-bottom: 2px solid rgba(0, 0, 0, 0.2); } header nav.active { left: 0; } } .fake { height: 100%; background: url("http://www.setwalls.ru/pic/201504/1024x768/setwalls.ru-76864.jpg") no-repeat center center; background-size: cover; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Main</title> <!-- Side links --> </script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Adding css --> <!-- Adding js --> <!-- <script src="js/menu_script.js"></script> --> </head> <body> <header> <img class="logo" src="https://www.48hourslogo.com/Public/images/bg/10.png" alt="Logo"> <nav> <ul> <li><a href="#" class="active">Main</a></li> <li><a href="#">Products</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Social Media</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul> </nav> <div class="menu-toggle"> <i class="fa fa-bars"></i> </div> </header> <div class="fake"></div> <div class="fake"></div> </body> </html>

  • on html,body hang up toggleClass with overflow:hidden - user33274
  • @ MaksimLensky Thank you) - Antonio112009

1 answer 1

With the menu open, hang it on body overflow:hidden , and when you close it delete it.

Turnkey solution

 $(document).ready(function() { $('.menu-toggle').click(function() { $('nav').toggleClass('active'); $('body').toggleClass('no-scroll'); }) }) 
 body, html { width: 100%; height: 100%; padding: 0; margin: 0; font-family: Arial; } header { position: fixed; top: 0; left: 0; padding: 0 20px; background-color: #fff; width: 100%; box-sizing: border-box; } header .logo { padding-top: 10px; height: 50px; float: left; } header nav { float: right; padding-right: 20px; } header nav ul { margin: 0; padding: 0; display: flex; } header nav ul li { list-style: none; } header nav ul li a { height: 70px; line-height: 70px; padding: 0 30px; color: black; text-decoration: none; display: block; font-size: 20px; } header nav ul li a:hover, header nav ul li a.active { color: black; border-bottom: 5px solid greenyellow; } header .menu-toggle { color: #FF3032; float: right; line-height: 70px; cursor: pointer; display: none; } @media (max-width: 991px) { header { width: 100%; padding: 0 20px; margin: 0; } header .menu-toggle { display: block; } header nav { margin: 0; padding: 0; position: absolute; width: 100%; height: 100vh; background-color: #fff; top: 70px; left: -110%; transition: .5s; } header nav ul { display: block; text-align: center; border-top: 2px solid rgba(0, 0, 0, 0.2); } header nav ul li a { border-bottom: 2px solid rgba(0, 0, 0, 0.2); } header nav.active { left: 0; } } .no-scroll { overflow: hidden; } .fake { height: 100%; background: url("http://www.setwalls.ru/pic/201504/1024x768/setwalls.ru-76864.jpg") no-repeat center center; background-size: cover; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Main</title> <!-- Side links --> </script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Adding css --> <!-- Adding js --> <!-- <script src="js/menu_script.js"></script> --> </head> <body> <header> <img class="logo" src="https://www.48hourslogo.com/Public/images/bg/10.png" alt="Logo"> <nav> <ul> <li><a href="#" class="active">Main</a></li> <li><a href="#">Products</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Social Media</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul> </nav> <div class="menu-toggle"> <i class="fa fa-bars"></i> </div> </header> <div class="fake"></div> <div class="fake"></div> </body> </html>

  • ATP ............ - Antonio112009
  • @ Antonio112009 please) - user192664