Как убрать прокрутку при появлении мобильного меню - PullRequest
Новая
       0

Как убрать прокрутку при появлении мобильного меню

0 голосов
/ 20 июня 2020

У меня появляется опция мобильного меню при нажатии на тройную строчку lo go. Но когда он появится, прокрутить еще можно. А можно ли там, где нельзя прокручивать в меню? Я попробовал положение: исправлено; но я не мог заставить его работать. Дайте мне знать, если вы найдете способ заставить это работать, или есть другой способ. Спасибо 

function openNav() {
    document.getElementById("myNav").style.width = "100%";
  }
  
  function closeNav() {
    document.getElementById("myNav").style.width = "0%";
  }
  #md1{
    width:100%;
    height:63px;
    background-color: rgb(84, 104, 217);
    top:0;
    position:absolute;
  }
  body {
    font-family: 'Lato', sans-serif;
  }
  .bars{
  color:white;
  }
  .overlay {
    height: 100%;
    position:fixed;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(84, 104, 217);
    overflow-x: hidden;
    transition: 0.5s;
  }
  .fixedPosition
  {
     position: fixed;
  }
  .overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    color:white;
  }
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: white;
    display: block;
    transition: 0.3s;
  }
  
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }
  
  @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    }
  }
.footer {
  position: relative;
  background-color: rgb(84, 104, 217);
  height: 80px;
  top: 546px;
  color: white;
  overflow: hidden;
}

.footwords {
  padding-top: 32px;
  font-family: 'playfair_displayregular';
  position: relative;
  left: 6%;
}
  .dtp {
  display:none;
  }
  .leftimage {
    position: absolute;
    object-fit: cover;
    width: 95%;
    height: 365px;
    top: 67px;
    float:left;
    left:2.5%;
  }
}
<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" type="text/css"  href="CSS/styleindex.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src='Javascript/index.js'></script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168595753-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-168595753-1');
</script>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Rom Fradkin
  </title>
  <link rel="shortcut icon" type='image/png' href="Images/favicon.png">
</head>

<body>
  <header class="topnav" id="topnav">
    <div class='dtp'>
    <a class="active-menu" href="index.html">Home</a>
    <a class="link" href="Pages/academics.html">Academics</a>
    <a class="link" href="Pages/projects.html">Projects</a>
    <a class="link" href="Pages/communityservice.html">Community Service</a>
  </div>
    <div id='md1'>
      <div class='md'>
        <div id="myNav" class="overlay">
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
          <div class="overlay-content">
            <a href="index.html">Home</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
          </div>
        </div>
        
        <span class='bars' style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
        
    </div>
    </div>
  </div>
  </header>
  <div class='section1'>
    <img class= 'leftimage' src="Images/frontback.jpg" alt="Missing File">
    <div class='HelloIm'>Hello, I'm</div>>
    <div class='romf'>Rin.</div>>
  </div>
  <div class='bio'>
      <img class = 'rndface' src="Images/rndface.png" alt="Missing File">
      <h1 class='topname'>
        Rkin
      </h1>
      <p class='school'>
        Nechool
      </p>
      <p class='interests'>
        Encience
      </p>
      <p class='location'>
        Chicnois
      </p>
      <p class='mail'>
        fril.com
      </p>
      <p class='num'>
        (8
      </p>
      <p>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagkin/" class="fa fa-instagram"></a>
        <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/inin-a3a9541a5/" class="fa fa-linkedin"></a>
        <a target="_blank" rel="noopener noreferrer" href="https://github.in" class="fa fa-github"></a>
      </p>
      <p>
    </div>
  
  </body>
</html>

1 Ответ

1 голос
/ 20 июня 2020

Я думаю, что простой способ сделать страницу не прокручиваемой при открытии навигации - установить стиль overflow тега body на hidden, а вы закрываете навигацию, просто установите его обратно на auto для повторной прокрутки 

function openNav() {
  document.getElementById("myNav").style.width = "100%";
  document.getElementsByTagName("body")[0].style.overflow = "hidden"; // add here
}

function closeNav() {
  document.getElementById("myNav").style.width = "0%";
  document.getElementsByTagName("body")[0].style.overflow = "auto"; // add here
}

Например, вы можете посмотреть здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...