Задать вопрос
@lilici
javascript

Как сделать прокрутку модального окна вместе со страницей?

здравствуйте! есть модальное окно, вызываемое кнопкой, но на декстопах надо сделать его открытым по умолчанию, частью самой страницы слева. Пробовал через изменение display: hidden на block, но тогда оно не прокручивается вниз, при добавлении overflow: scroll прокручивается отдельно от всего сайта

html:
<div id="modal_menu">
  <div class="hamburger-menu">
    <div class="menu__box">
      <div class="menu__header">
        <span class="modal_menu__close menu__el-cancel hide-l"><img src="img/cancel.svg" class="menu__icon-cancel"></span>
        <img src="img/logo.svg" class="menu__icon-logo" alt="Photo" />
        <button aria-label="Site search" type="button"><span class="menu__el-loop"><img src="img/loop.svg" class="menu__icon-loop"></span></button>
      </div>
      <ul class="menu__box-list">
        <li><a href="#" aria-label="Go to the repair section" class="menu__item">Ремонт техники</a></li>
        <li><a href="#" aria-label="Go to the section about services and services" class="menu__item">Услуги и сервисы</a></li>
        <li><a href="#" aria-label="Information for corporate clients" class="menu__item">Корпоративным клиентам</a></li>
        <li><a href="#" aria-label="Information for sellers of equipment" class="menu__item">Продавцам техники</a></li>
        <li><a href="#" aria-label="Information for partners" class="menu__item">Партнерам</a></li>
        <li><a href="#" aria-label="Information for manufacturers" class="menu__item">Производителям</a></li>
        <li><a href="#" aria-label="Addresses of our service centers" class="menu__item">Наши сервисные центры</a></li>
        <li><a href="#" aria-label="Go to contacts" class="menu__item">Контакты</a></li>
      </ul>
      <div class="menu__footer">
        <div class="icons-menu__footer">
          <button aria-label="Go to chat" type="button"><span class="menu__el-sms"><img src="img/sms.svg" class="menu__icon-sms"></span></button>
          <button aria-label="Go to my profile" type="button"><span class="menu__el-profile"><img src="img/profile.svg" class="menu__icon-profile"></span></button>
      </div>
      <div class="contacts">
        <a href="mailto:mail@cps.com">mail@cps.com</a>
        <a href="tel:8800890890">8 800 890 890</a>
      </div>  
        <ul class="lng">
          <li><button aria-label="Change language to Russian" type="button">RU</button></li>
          <li><button aria-label="Change language to English" type="button">EN</button></li>
          <li><button aria-label="Change language to Chinese" type="button">CN</button></li>
        </ul>
      </div>
      </div>
  </div>
</div>


js: 
var modalMenu = document.getElementById("modal_menu");
var openMenu = document.getElementById("modal_menu__open");
var closeMenu = document.getElementsByClassName("modal_menu__close")[0];
openMenu.onclick = function() {
  modalMenu.style.display = "block";
}
closeMenu.onclick = function() {
  modalMenu.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modalMenu) {
    modalMenu.style.display = "none";
  }
}


css:
#modal_menu {
  position: fixed; 
  display: block;
  width: 320px; 
left: 0;
}
.hamburger-menu {
  width: 320px;
height: 100%;
  font-family: "TT Lakes";
  margin: 0;
  display: block;
  padding: 0;
}
.menu__header button {
  display: inline-block;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: center;
  background-color: white;
  cursor: pointer;
}
.menu__box {
  list-style-type: none;
  display: flex;
  background-color: white;
  flex-direction: column;
  margin-top: -20px;
  padding: 0;
}
.menu__box a {
  text-decoration: none;
  font-size: 16px;
  margin-left: 24px;
  color: black;
  cursor: pointer;
  font-weight: 500;
}
.menu__box a:hover {
  color: #7e7e82;
  transition: all 500ms ease;
}
.menu__box a:hover::before {
  content: "";
  width: 1px;
  margin: 0;
  position: absolute;
  left: 0;
  height: 30px;
  background-color: #41f6d7;
  border-bottom-right-radius: 500%;
  border-top-right-radius: 500%;
  border: 2px solid #41f6d7;
}
.menu__btn:hover {
  cursor: pointer;
}
.menu__header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 24px;
  margin-top: 24px;
  width: 320px;
  gap: 16px;
}
.menu__icon-cancel {
  width: 16px;
  margin-top: 12px;
  height: 16px;
}
.menu__el-cancel {
  display: flex;
  justify-content: center;
  width: 40px;
margin-top: 24px;
  margin-right: 5px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.modal_menu__close:hover,
.modal_menu__close:focus {
  cursor: pointer;
}
.menu__icon-logo {
  width: 91px;
  margin-top: 18px;
  margin-right: 65px;
  height: 51px;
}
.menu__icon-loop {
  width: 17px;
  margin-top: 11px;
  height: 17px;
}
.menu__el-loop {
  display: flex;
  margin-top: 24px;
  justify-content: center;
  width: 40px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.menu__header button {
  cursor: pointer;
  background-color: white;
  border: 0;
}
.menu__box-list {
  display: flex;
  flex-direction: column;
  font-family: "TT Lakes";
  gap: 32px;
  margin-bottom: 268px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.menu__box-list a {
  text-decoration: none;
  font-size: 16px;
  margin-left: 24px;
  color: black;
  cursor: pointer;
  font-weight: bold;
}
.menu__box-list a:hover {
  color: #7e7e82;
  transition: all 500ms ease;
}
.menu__box-list a:hover::before {
  content: "";
  width: 1px;
  margin: 0;
  position: absolute;
  left: 0;
  height: 30px;
  background-color: #41f6d7;
  border-bottom-right-radius: 500%;
  border-top-right-radius: 500%;
  border: 2px solid #41f6d7;
}
.menu__footer {
  margin-left: 15px;
  padding: 0;
}
.icons-menu__footer {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.icons-menu__footer button {
  display: inline-block;
  border: 0;
  text-align: center;
  background-color: white;
  cursor: pointer;
}
.menu__icon-phone {
  width: 18px;
  margin-top: 10px;
  height: 18px;
}
.menu__el-phone {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  width: 40px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.menu__icon-sms {
  width: 20px;
  margin-top: 10px;
  height: 20px;
}
.menu__el-sms {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  width: 40px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.menu__icon-profile {
  width: 20px;
  margin-top: 10px;
  height: 18px;
}
.menu__el-profile {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  width: 40px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.contacts {
  display: flex;
  flex-direction: column;
}
.contacts a[href^="mailto:"] {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  text-decoration: none;
  color: black;
  margin-top: 16px;
  padding: 0;
}
.contacts a[href^="tel:"] {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: black;
  text-decoration: none;
  margin-top: 12px;
  padding: 0;
}
.lng {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  gap: 7px;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  margin-top: 40px;
  font-size: 24px;
}
.lng button {
  display: inline-block;
  border: 0;
  text-align: center;
  background-color: white;
  cursor: pointer;
}
.lng button:hover {
  color: #7e7e82;
}
  • Вопрос задан
  • 63 просмотра
3 комментария
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
В wordpress подключить модуль по рассрочке (документацию дам)
23 апр. 2024, в 13:51
4500 руб./за проект
Сохранение постов из телеграм каналов+отправка платящим пользователям
17 апр. 2024, в 16:55
200000 руб./за проект
Разработать решение для автоматизации работы с Chat GPT
23 апр. 2024, в 13:29
3000 руб./за проект
Ещё заказы