Фиксированное мобильное меню с остановкой скролла

Итак, все делаем через position: fixed и простой скриптец. И да, конечно же, эта фича сработает только для мобильного меню (полноэкранного), ибо иначе будет некрасиво. HTML тут не супер важен, посмотрите на примере

CSS

.is-menu-open {
  position: fixed;
  overflow: hidden;
}

is-menu-open — класс, который будет добавляться когда меню открыто.

JS

const burger = document.querySelector('.burger');
const menuLinks = document.querySelectorAll('.mobile-menu a');
const mobileMenu = document.querySelector('.mobile-menu');

burger.addEventListener('click', (e) => {
  e.preventDefault();

  let pagePos = window.scrollY;
  document.body.classList.add('is-menu-open');
  document.setAttribute('data-scroll', pagePos);

  mobileMenu.style.display = 'block';
});

menuLinks.forEach(el => {
  el.addEventListener('click', (e) => {
    e.preventDefault();

    let pos = parseInt(document.body.getAttribute('data-scroll'));

    mobileMenu.style.display = 'none';

    document.body.classList.remove('is-menu-open');
    document.setAttribute('data-scroll', '');

    window.scrollTo(0, pos);
  });
});

Собственно, по бургеру открываем меню (стандартные вещи) и сохраняем в переменную pagePos текущую позицию скролла. Затем, уже по закрытию меню мы скроллим сайт на эту же позицию, убирая класс, содержащий position: fixed. И, поскольку меню у нас с фоном (и выше) — внешне ничего не видно, но скролл сохраняется.

Вот такая вот мелочь, но довольно полезная мелочь. Надеюсь, кому-то помогло)