當我打開菜單移動時禁用滾動時的“隱藏/顯示”

Question

我在 javascript 中制作了一個簡單的腳本（addclass 和 removeclass），用於在滾動頁面時隱藏和顯示菜單欄。 在較小的屏幕中，我將菜單轉換為漢堡菜單，當我通過單擊漢堡圖標打開菜單時，我無法禁用該隱藏和顯示行為。 基本上，我只想在單擊漢堡包圖標並打開菜單時禁用該行為。 我把我的代碼放在 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; } }

如果想查看固定位置的工作原理，請訪問此示例：

鏈接到示例