时间戳

首页 > 解决方案 > 按下汉堡时如何停止页面滚动？

javascript - 按下汉堡时如何停止页面滚动？

问题描述

因此，我制作了一个响应式导航栏，并希望在按下导航栏的按钮时停止滚动。现在，当我按下汉堡按钮时，页面仍然可以在后台滚动。我试图把 overflow-y: hidden 放在我的 CSS 下面，.nav-active但它似乎也不起作用。

HTML：

<!-- My Nav Bar buttons -->
            <div class = "nav-links">
                <a href = "index.html">A</a>
                <a href = "about.html">B</a>
                <a href = "work.html">C</a>
                <a href = "testimonials.html"><u>D</u></a>
                <a href = "contact.html">E</a>
            </div>
            <!--The burger class to make it phone optimised-->
            <div class="burger">
                <div class = "line1"></div>
                <div class = "line2"></div>
                <div class = "line3"></div>
            </div>
        </nav>
        <!-- End of the Nav bar Code -->

CSS：

@media (max-width: 810px)
{
    html
    {
        overflow-x: hidden;
    }
    body
    {
        overflow-x: hidden;
    }
    .nav-links
    {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: rgb(150, 150, 150);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-links li
    {
        opacity: 1;
    }
    .burger
    {
        display: block;
    }
    .nav-links 
    {
        position: fixed;
    }
}
.nav-active
{
    transform: translateX(0%);
}

和JS：

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
    
    burger.addEventListener('click', () => 
    {
        //Toggle Nav
        nav.classList.toggle('nav-active');
        //Animate Links
        navLinks.forEach((link, index) => 
        {
        if(link.style.animation)
        {
            link.style.animation = '';
        }
        else
        {
            link.style.animation = 'navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s';
        }
        });
        //Burger Animation
        burger.classList.toggle('toggle');
    });
}
navSlide();

标签： javascripthtmlcss

解决方案

你想在你的js中输入这个

<script>
Webflow.push(function() {
  $('.menu-button-class').click(function(e) {
e.preventDefault();
    $('body').css('overflow', 'hidden');
  });

  $('.menu-class-name').click(function(e) {
e.preventDefault();
    $('body').css('overflow', 'auto');
  });
});
</script>

推荐阅读