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

Question

我在 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;
        }

标签： javascripthtmlcssscrollmenu

Answer 1

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

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

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

链接到示例