为什么我的导航栏在滚动时会消失？答案

【问题标题】：Why does my navigation bar disappear when scrolling?为什么我的导航栏在滚动时会消失？
【发布时间】：2022-01-27 17:14:51
【问题描述】：

这是我目前必须使用的网站：https://www.mpc.gov.my/home。当您使用桌面或大屏幕查看时，一切似乎都很好，但当您尝试使用移动/较小的屏幕浏览时，导航菜单让用户头疼。

我该如何解决？如果我向下滚动，我不希望菜单消失。有人有什么想法吗？

$(document).ready(function() {
  "use strict";
  
  $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
  $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
  $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">&nbsp;</a>");
  
  $(".menu > ul > li").hover(function(e) {
    if ($(window).width() > 943) {
      $(this).children("ul").stop(true, false).fadeToggle(150);
      e.preventDefault();
    }
  });
  
  $(".menu > ul > li").click(function() {
    if ($(window).width() <= 943) {
      $(this).children("ul").fadeToggle(150);
    }
  });
  
  $(".menu-mobile").click(function(e) {
    $(".menu > ul").toggleClass('show-on-mobile');
    e.preventDefault();
  });
});

$(window).resize(function() {
  $(".menu > ul > li").children("ul").hide();
  $(".menu > ul").removeClass('show-on-mobile');
});

/*===================================
              Third Mega Menu
    =====================================*/

.menu {
  width: 100%;
}

.menu-container {
  margin: 0 auto;
  background: #e9e9e9;
}

.menu a.logo {
  display: inline-block;
  padding: 1.5em 3em;
  width: 19%;
  float: left;
}

.menu img {
  max-width: 100%;
}

.menu-mobile {
  display: none;
  padding: 20px;
}

.menu-mobile:after {
  content: "\f0c9";
  font-family: "Font Awesome 5 Pro";
  font-size: 2.5rem;
  padding: 0;
  float: right;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
}

.menu-dropdown-icon:before {
  content: "\f0c9";
  font-family: "Font Awesome 5 Pro";
  display: none;
  cursor: pointer;
  float: right;
  padding: 1.5em 2em;
  background: #fff;
  color: #333;
}

.menu>ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
  box-sizing: border-box;
  clear: right;
}

.menu>ul:before,
.menu>ul:after {
  content: "";
  display: table;
}

.menu>ul:after {
  clear: both;
}

.menu>ul>li {
  float: left;
  background: #e9e9e9;
  padding: 0;
  width: 25%;
  /* added- aidan */
  margin: 0;
  list-style: none!important;
}

.menu>ul>li a {
  text-decoration: none;
  padding: 1.5em 3em;
  display: block;
}

.menu>ul>li:hover {
  background: #f0f0f0;
}

.menu>ul>li>ul {
  display: none;
  width: 100%;
  background: #f0f0f0;
  padding: 20px;
  position: absolute;
  z-index: 99;
  left: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

.menu>ul>li>ul:before,
.menu>ul>li>ul:after {
  content: "";
  display: table;
}

.menu>ul>li>ul:after {
  clear: both;
}

.menu>ul>li>ul>li {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
  list-style: none!important;
  /* added - aidan */
}

.menu>ul>li>ul>li a {
  color: #777;
  padding: .2em 0;
  width: 95%;
  display: block;
  border-bottom: 1px solid #ccc;
}

.menu>ul>li>ul>li a:hover {
  color: #03a9f4;
}

.menu>ul>li>ul>li>ul {
  display: block;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
  box-sizing: border-box;
  margin-left: 20px;
  text-indent: -10px;
}

.menu>ul>li>ul>li>ul:before,
.menu>ul>li>ul>li>ul:after {
  content: "";
  display: table;
}

.menu>ul>li>ul>li>ul:after {
  clear: both;
}

.menu>ul>li>ul>li>ul>li {
  float: left;
  width: 100%;
  padding: 0px 0;
  /*reduced to 0px - aidan */
  list-style: none!important;
  /*added -aidan */
  margin: 0!important;
  /*added !important - aidan*/
  font-size: .8em;
}

.menu>ul>li>ul>li>ul>li a {
  border: 0;
  font-size: 14px;
}

.menu>ul>li>ul.normal-sub {
  width: 300px;
  left: auto;
  padding: 10px 20px;
}

.menu>ul>li>ul.normal-sub>li {
  width: 100%;
}

.menu>ul>li>ul.normal-sub>li a {
  border: 0;
  padding: 1em 0;
}

.head-sub {
  font-weight: 700;
  /* added - aidan */
  color: #be1621!important;
  /* added - aidan */
}

.mobile-vue {
  display: none!important;
}

.desktop-vue {
  display: block!important;
  padding: 0px!important;
}

li.menu-dropdown-icon {
  margin: 0px!important;
}

.img-desktop-vue {
  max-width: 70%!important;
}

.tertiary-menu {
  background-color: #e3e3e3;
  /* added - aidan */
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
    Mobile style's
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 991px) {
  .mobile-vue {
    display: block!important;
    /*added - aidan*/
  }
  .desktop-vue {
    display: none!important;
    /*added - aidan*/
    padding: unset;
  }
  li.menu-dropdown-icon {
    margin: unset!important;
    /*added - aidan*/
  }
  .menu-container {
    width: 100%;
    display: block;
  }
  .menu-container .menu {
    display: inline-block;
  }
  .menu-mobile {
    display: block;
    float: right;
    padding: 20px 20px 0;
  }
  .menu-dropdown-icon:before {
    display: block;
  }
  .menu>ul {
    display: none;
    width: 100%;
  }
  .menu>ul>li {
    width: 100%;
    float: none;
    display: block;
    margin: 0!important;
    /* added - aidan */
  }
  .menu>ul>li a {
    padding: 1.5em;
    width: 100%;
    display: block;
    color: #000000;
  }
  .menu>ul>li>ul {
    position: relative;
    padding: 0 40px;
  }
  .menu>ul>li>ul.normal-sub {
    width: 100%;
  }
  .menu>ul>li>ul>li {
    float: none;
    width: 100%;
    margin-top: 20px;
    margin: 0!important;
    /* added - aidan*/
  }
  .menu>ul>li>ul>li a {
    width: 90%;
    /* added - aidan */
  }
  .menu>ul>li>ul>li:first-child {
    margin: 0;
  }
  .menu>ul>li>ul>li>ul {
    position: relative;
  }
  .menu>ul>li>ul>li>ul>li {
    float: none;
  }
  .menu .show-on-mobile {
    display: block;
  }
  .container-mobil {
    padding-left: unset!important;
    padding-right: unset!important;
  }
}

.fas,
.far {
  padding-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="menu-container">
  <div class="menu">
    <ul class="clearfix">
      <li>
        <a href="#" class="desktop-vue" style="background-color: #5ac6ca;text-align: center;"> <img src="/static_files/media_manager/1/Index-About-EN-1.png" class="img-desktop-vue"></a>
        <a href="#" class="mobile-vue">ABOUT MPC</a>
        <ul>
          <li><a href="#" class="head-sub">Corporate Info</a>
            <ul>
              <li><a href="/background"><i class="fas fa-building"></i> Background</a></li>
              <li><a href="/vision-mission-and-objectives"><i class="fas fa-bullseye"></i> Vision, Mission &amp; Objectives</a></li>
              <li><a href="/board-of-directors"><i class="fas fa-sitemap"></i> Board of Directors</a></li>
              <li><a href="/management-mpc"><i class="fas fa-sitemap"></i> MPC Management</a></li>
              <li><a href="/organisational-structure"><i class="fas fa-sitemap"></i> Organisational Structure</a></li>
              <li><a href="/quality-policy"><i class="fas fa-file-contract"></i> Quality Policy</a></li>
              <li><a href="/client-charter"><i class="fas fa-list-alt"></i> Client Charter</a></li>
              <li><a href="/no-gift-policy"><i class="fas fa-file-contract"></i> No Gift Policy</a></li>
              <li><a href="/anti-corruption-plan"><i class="fas fa-file-contract"></i> Anti-Corruption Plan</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">Contact Us</a>
            <ul>
              <li><a href="/contact-us"><i class="fas fa-address-book"></i> How To Contact Us?</a></li>
              <li><a href="/staff-directory"><i class="fas fa-users"></i> Staff Directory</a></li>
              <li><a href="/frequently-asked-question"><i class="fas fa-tasks"></i> Frequently Asked Question</a></li>
              <li><a href="/career"><i class="fas fa-briefcase"></i> Career</a></li>
              <li><a href="/procurement"><i class="fas fa-chart-area"></i> Procurement</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">Staff Access</a>
            <ul>
              <li><a href="http://staff.mpc.gov.my/"><i class="fas fa-globe"></i> Staff Portal</a></li>
              <li><a href="/prince"><i class="fas fa-globe"></i> Procurement Information Center (PRINCE)</a></li>
              <li><a href="/fin"><i class="fas fa-globe"></i> Finance Portal</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="desktop-vue" style="background-color: #f7902f;text-align: center;"> <img src="/static_files/media_manager/1/Index-Programme-EN-1.png" class="img-desktop-vue"></a>
        <a href="#" class="mobile-vue">PROGRAMMES &amp; SERVICES</a>
        <ul>
          <li><a href="#" class="head-sub">Productivity Initiatives</a>
            <ul>
              <li><a href="/industry4wrd"><i class="fas fa-passport"></i> Industry4WRD Readiness Assessment</a></li>
              <li><a href="/team-excellence-convention"><i class="fas fa-clipboard-check"></i> Team Excellence Convention</a></li>
              <li><a href="/lean-management"><i class="fas fa-briefcase"></i> Lean Management</a></li>
              <li><a href="/enterprise-business-excellence"><i class="fas fa-cubes"></i> Enterprise Business Excellence</a></li>
              <li><a href="/productivity-excellence-recognition"><i class="fas fa-award"></i> Productivity Excellence Recognition</a></li>
              <li><a href="/mpc-certified-productivity-specialist-programme"><i class="fas fa-user-tie"></i> MPC Certified Productivity Specialist Programme</a></li>
              <li><a href="/productivity-best-practices-case-studies-and-sharing"><i class="fas fa-poll"></i> Productivity Best Practices Case Studies and Sharing</a></li>
              <li><a href="/productivity-1010"><i class="fas fa-balance-scale"></i> Productivity 1010</a></li>
              <li><a href="/negeri-produktif"><i class="fas fa-quote-left"></i> Negeri Produktif</a></li>
              <li><a href="/malaysia-productivity-blueprint"><i class="fas fa-puzzle-piece"></i> Malaysia Productivity Blueprint</a></li>
              <li><a href="/productivity-nexus"><i class="fas fa-people-carry"></i> Productivity Nexus</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">Productivity Online Services</a>
            <ul>
              <li><a href="/digital-regulatory-notification"><i class="fas fa-globe"></i> Digital Regulatory Notification</a></li>
              <li><a href="http://oa.mpc.gov.my/prod/audit.nsf/reg.htm"><i class="fas fa-globe"></i> QE Audit Application (Quality Environment)</a></li>
              <li><a href="http://bond.mpc.gov.my/"><i class="fas fa-globe"></i> Benchmarking Online Networking Database (BOND) Portal</a></li>
              <li><a href="/ezbe"><i class="fas fa-globe"></i> ezBE Assessment Tool</a></li>
              <li><a href="https://upc.mpc.gov.my/"><i class="fas fa-globe"></i> Unified Public Consultation (UPC) Portal</a></li>
              <li><a href="https://www.wayup.my"><i class="fas fa-globe"></i> WayUp Portal</a></li>
              <li><a href="http://mymudah.mpc.gov.my/"><i class="fas fa-globe"></i> Smart Regulation (#MyMudah)</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">Business Virtual Advisory Services (VAS)</a>
            <ul>
              <li><a href="/business-virtual-advisory-clinic"><i class="fas fa-business-time"></i> Business Virtual Advisory Clinics (VAC)</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">MPC Webinar Sessions With Experts</a>
            <ul>
              <li><a href="https://www.youtube.com/playlist?list=PLYBMIV_UwzSQuhk5rDPiBG2sLQIYWQ-bv"><i class="fas fa-chalkboard-teacher"></i> MPC Webinar Sessions With Experts</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">P&amp;I Associate Membership</a>
            <ul>
              <li><a href="/associate-membership"><i class="fas fa-users"></i> P&amp;I Associate Membership</a></li>
            </ul>
          </li>
          <li><a href="" class="head-sub">Events Calendar</a>
            <ul>
              <li><a href="/events-calendar"><i class="far fa-calendar-alt"></i> Events Calendar</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="desktop-vue" style="background-color: #4d4f99;text-align: center;"> <img src="/static_files/media_manager/1/Index-Productivity-EN-1.png" class="img-desktop-vue"></a>
        <a href="#" class="mobile-vue">PRODUCTIVITY &amp; COMPETITIVENESS</a>
        <ul>
          <li><a href="#" class="head-sub">Smart Regulation Towards A Robust Ecosystem</a>
            <ul>
              <li><a href="/brvac"><i class="fas fa-business-time"></i> Business Regulation Virtual Advisory Clinic</a></li>
              <li><a href="/good-regulatory-practice"><i class="fas fa-landmark"></i> Good Regulatory Practice (GRP)</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">Workforce Of The Future</a>
            <ul>
              <li class="menushow"><a href="/espo"><i class="fas fa-thumbs-up"></i> e-Shared Prosperity Organization (eSPO)</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">Digitalisation And Technology</a>
            <ul>
              <li><a href="/digitalisation-and-technology"><i class="fas fa-chalkboard-teacher"></i> Digitalisation And Technology</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">Productivity Mindset</a>
            <ul>
              <li><a href="/programme-and-activity"><i class="fas fa-user-friends"></i>  Programme and Activity</a></li>
              <li><a href="/sejahtera-productivity-culture-index"><i class="fas fa-users-cog"></i> Sejahtera Productivity Culture Index</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">Incentive Structure</a>
            <ul>
              <li><a href="/smart-incentives"><i class="fas fa-gifts"></i> Incentive Structure</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="desktop-vue" style="background-color: #88c05f;text-align: center;"> <img src="/static_files/media_manager/1/Index-Media-EN-1.png" class="img-desktop-vue"></a>
        <a href="#" class="mobile-vue">MEDIA &amp; PUBLICATION</a>
        <ul>
          <li><a href="#" class="head-sub">Media</a>
            <ul>
              <li><a href="/press-release"><i class="far fa-newspaper"></i> Press Release</a></li>
              <li><a href="/speeches"><i class="far fa-comment-alt"></i> Speeches</a></li>
              <li><a href="/audio-gallery"><i class="fas fa-music"></i> Audio Gallery</a></li>
              <li><a href="/video-gallery"><i class="fas fa-video"></i> Video Gallery</a></li>
              <li><a href="/enewsletter"><i class="fas fa-envelope-open-text"></i> e-Newsletter</a></li>
            </ul>
          </li>
          <li><a href="#" class="head-sub">Publication</a>
            <ul>
              <li><a href="/productivity-performance"><i class="fas fa-network-wired"></i> Productivity Performance</a></li>
              <li><a href="/competitiveness-report"><i class="fas fa-chart-bar"></i> Competitiveness Report</a></li>
              <li><a href="/annual-report"><i class="fas fa-chart-line"></i> Annual Report</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

当我在移动视图中滚动时会发生以下情况：https://youtu.be/UzLTU-Dzhes

【问题讨论】：

我真的无法理解这个问题。你说在桌面/大屏幕上它运行良好，但是当我打开网站时导航菜单没有出现（因为已经回答了：display: none），你说在移动设备上它不工作但在事实上它在那里工作（它看起来有点奇怪）。
没有。你可以看到这个视频youtu.be/UzLTU-Dzhes 当我向下滚动时导航菜单往往会隐藏。
我明白你现在的意思了，但我无法复制这个错误。我已经在两部手机上尝试过，并在浏览器中处于响应模式。导航菜单不会像它为您消失一样消失。这可能与您的浏览器版本或移动模型有关。
我想我已经自己解决了这个问题，但我不知道这是否是真正的解决方案。我只是禁用了 jquery 脚本中的最后一部分。 --> $(".menu > ul > li").children("ul").hide(); $(".menu > ul").removeClass('show-on-mobile');

标签： html jquery css navigation responsiveness

【解决方案1】：

如果您在您的网站中进行检查，您会看到菜单中没有显示：

.menu-container {
    width: 100%;
    display: none;
}

删除它，一切都会正常工作

【讨论】：

这不是我要找的。该菜单应该用于移动视图，这就是它默认隐藏的原因。也许你看到这个视频就知道了youtu.be/UzLTU-Dzhes
你可以做位置固定：例如：@media only screen and (max-width: 991px) .menu-container { width: 100%; display: block; position: fixed; z-index: 999; top: 0; }
试过了，还是不行。如果我这样做，我根本无法滚动页面。
也许可以试试这个，<div class="menu-container" style="position: sticky; top: 0; z-index: 12;"> 请注意位置：sticky 不支持Internet Explorer、Edge 15 及更早版本。