Отключить «скрыть / показать» на прокрутки, когда я открываю меню мобильного

Question

Я сделал простой скрипт (addclass и removeclass) в javascript, чтобы скрыть и показать строку меню при прокрутке страницы. На меньших экранах я превращаю меню в меню гамбургера и не могу отключить это скрытие и раскрытие поведения, когда открываю меню, щелкая значок гамбургера. По сути, я хочу отключить это поведение, только когда я нажимаю значок гамбургера и открываю меню. Я поместил здесь мой код в javascript и мой css. [обновление] Я сделал кодовую ручку здесь: 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;
        }

Answer 1

вы можете использовать медиа-запросы для этой проблемы, как показано ниже

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

, если хотите увидеть, как работает фиксированная позиция, посетите этот пример:

ссылка на пример