Запретить скролл после нажатия на бургер

Question

Есть меню, 2 состояния - открытое, закрытое. После открытия, нужно запретить скролл. Используя JQERY или чистый JS.

HTML

<header>
        <div class="header-container">
            <div class=""><img class="logo" src="../img/logo.svg"></div>
            <input type="checkbox" id="menu-checkbox">
            <nav role="navigation">
                <label for="menu-checkbox" class="toggle-button" data-open="MENU" data-close="CLOSE" onclick></label>
                <ul class="main-menu">
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">TASK</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">EXIT</a></li>
                </ul>
            </nav>
        </div>
</header>

CSS

@media screen and (max-width: 768px) {
    .header-container {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .main-menu {
        display: none;
    }
    .main-menu li {
        width: 100%;
        display: block;
    }
    .main-menu a {
        display: block;
        padding: 8px;
    }
    .toggle-button {
        text-align: center;
        display: block;
        cursor: pointer;
        color: black;
    }
    .toggle-button::after {
        content: attr(data-open);
        display: block;
    }
    #menu-checkbox:checked+nav[role="navigation"] .main-menu {
        display: block;
    }
    #menu-checkbox:checked+nav[role="navigation"] .toggle-button::after {
        content: attr(data-close);
    }
    .header-container a {
        margin-right: -65px;
    }
    .main-menu {
        position: relative;
        top: 30px;
        right: 115px;
        margin-bottom: 1000px;
    }
}

JS (Жалкая попытка из гугл. JQERY не знаю)

<script>
        if (attr('menu-checkbox') == "CLOSE") {
            $('body').css('overflow', 'hidden');
        } else {
            $('body').css('overflow', 'scroll');
        }
</script>

Answer 1

Раз у вас всё завязано на input с ним и будем работать:

JS

document.querySelector('#menu-checkbox').addEventListener('change', function(e) {
  document.body.style.overflow = e.target.checked === true ? 'hidden' : '';
});

jQuery

$('#menu-checkbox').on('change', function() {
  $('body').css('overflow', $(this).prop('checked') === true ? 'hidden' : '');
});

БЛОГ НА HUSL

Запретить скролл после нажатия на бургер

Ответы (1 шт):