当我打开菜单移动时禁用滚动上的“隐藏/显示”答案

【问题标题】：Disable "hide/reveal" on scroll when I open menu mobile当我打开菜单移动时禁用滚动上的“隐藏/显示”
【发布时间】：2020-02-26 17:44:50
【问题描述】：

我在 javascript 中制作了一个简单的脚本（addclass 和 removeclass），用于在滚动页面时隐藏和显示菜单栏。在较小的屏幕中，我将菜单变成汉堡菜单，当我通过单击汉堡图标打开菜单时，我无法禁用隐藏和显示行为。基本上，我只想在单击汉堡包图标并打开菜单时禁用该行为。我把我的代码放在 javascript 和我的 css 中。 [更新] 我在这里做了一个codepen： https://codepen.io/paulo-frutuoso/pen/oNXZPbX

  <header id="header-nav">
        <div class="container">
            <div class="row">
                <a class="logo col-lg-2 col-md-3 col-sm-4 col-xs-5" href="#">
                    <img src="images/logotipo.png" alt="Logo">
                </a>

                <nav class="col-lg-10">
                    <input id="menu-hamburguer" type="checkbox">
                    <label for="menu-hamburguer">
            <div class="menu">
              <span class="hamburguer"></span>
            </div>
          </label>

                    <ul class="menu_nav">
                        <li class="menu-item">
                            <a href="#" class="menu-link">home</a>
                        </li>
                        <li class="menu-item">
                            <a href="#" class="menu-link">tickets</a>
                        </li>

                        <li class="menu-item">
                            <a href="#" class="menu-link">store</a>
                        </li>
                        <li class="menu-item">
                            <a href="#" class="menu-link">marketplace</a>
                        </li>

                        <li class="infos-header">
                            <ul class="login-idioma">
                                <li>
                                    <a href="#" class="logo-dna">
                                        <img src="images/hero_dna.png" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="btn-login">
                                        <img src="images/login-icon.png" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="logo-dna">
                                        <img src="images/svg/brazil-idioma.svg" alt="">
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>




$(document).ready(function() {
    $("html").on("DOMMouseScroll mousewheel", function(e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            $("#header-nav").addClass("hide-nav-bar");
        } else {
            $("#header-nav").removeClass("hide-nav-bar");
        }


    });
});



   #header-nav {
        width: 100%;
        height: 133px;
        padding: 4.5rem 1rem 1rem;
        background: rgba(1, 50, 32, 0.8);
        position: fixed;
        top: 0;
        z-index: 99;
        // On Scroll animation
        -webkit-transition: -webkit-transform 0.7s .3s ease;
        transition: -webkit-transform 0.7s .3s ease;
        transition: transform 0.7s .3s ease;
        transition: transform 0.7s .3s ease, -webkit-transform 0.7s .3s ease;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0px, 0px, 0px);
}

   #header-nav.hide-nav-bar {
        -webkit-transform: translate(0, -100%);
        transform: translate(0, -100%);
        -webkit-backface-visibility: hidden;
    }

        input:checked~label .hamburguer {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        input:checked~label .hamburguer:before {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            top: 0;
        }
        input:checked~label .hamburguer:after {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            bottom: 0;
        }
        .menu {
            cursor: pointer;
            box-shadow: 0 0 0 0 rgba(145, 0, 40, .8), 0 0 0 0 rgba(145, 0, 40, .8);
            -webkit-transition: box-shadow 1.1s cubic-bezier(.19, 1, .22, 1);
            transition: box-shadow 1.1s cubic-bezier(.19, 1, .22, 1);
            opacity: 1;
        }
        /*ANIMATION MENU ***/
        input:checked~label .menu {
            background-color: $color-01;
            box-shadow: 0 0 0 190vw rgba(0, 105, 64, .9), 0 0 0 190vh rgba(0, 105, 64, 1);
        }
        /*** SHOW MENU BY CLICKING ***/
        input:checked~ul {
            @include flex(column, center, center, center);
            -webkit-transition: all 5s ease-in-out;
            transition: all 5s ease-in-out;
        }

【问题讨论】：

请也添加您的html
html 添加了@Addis
代码无法为我正确呈现。你能改写你想要的吗？我无法完全按照您的要求进行操作。
@Addis 我用我的代码做了一个codepen。 [内联链接]codepen.io/paulo-frutuoso/pen/oNXZPbX当我在更高的屏幕中滚动时，顶部的标题消失了。那很完美。但是当我打开汉堡菜单时，我想在移动设备中禁用这种行为。您可以检查当您打开汉堡菜单时，滚动条上的所有项目都会上下移动。
通过隐藏和审查你所说的动画行为？

标签： javascript html css scroll menu

【解决方案1】：

您可以像下面的代码一样使用媒体查询来解决这个问题

@media only screen and (max-width: 600px) {
  .navbar_class{
  position:fixed;
  }
}

如果想了解固定位置的工作原理，请访问此示例：

link to example

【讨论】：