修复了 Div 在移动浏览器中消失的问题

Fixed Div disappears in mobile browsers

在我工作的网站上,有一个固定的菜单 div,当屏幕宽度小于 769px 时显示。

单击顶部栏时会切换固定 div(并添加菜单打开 class)。

.header nav  {
        position: fixed;
        left: -330px;
        top: 75px;
        background: #87cc33;
        width: 330px;
        bottom: 0;
        z-index: 1000;
        overflow:auto;
        /* Transitions */
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

.menu.menu-open {
    left: 0px;
}

这在桌面浏览器中运行良好,但当我使用移动浏览器(或 Chrome 使用设备模式)时,我会遇到一些奇怪的行为。

在移动端,有 2 个问题:

1) 当页面内容可滚动时,菜单消失。但是,菜单切换仍然有效 - 如果我尝试在 Chrome 上使用开发人员工具在设备模式下打开菜单,它不会打开,但如果我禁用设备模式,菜单会打开。

http://jsfiddle.net/yrc2bfn4/

2) 如果页面内容足够短以至于没有滚动,则菜单以设备模式显示。但是,如果设备屏幕小到导致菜单滚动,那么菜单又会消失。

http://jsfiddle.net/q63cke2u/

将导航元素移到 header div 之外,并将 css .header nav 更改为 .menu 并将 .header nav ul 更改为 .menu ul

http://jsfiddle.net/seanmurrin/yg0b053s/

$(document).ready(function() 
{



/****** Full Size JQuery ************/




/****** Mobile Size JQuery ************/
// Show sidebar
$(".header-image").click(function() {
 $('.menu').toggleClass("menu-open");
 $('.header').toggleClass("menu-open");
});

// Show submenu
$(".nav-lvl-1 li").click(function() {
 $(this).find("ul").toggleClass("sub-menu-open-mobile");
 $(this).find("a").toggleClass("sub-menu-open-mobile");
});


});
* {
 font-family: Arial, Helvetica, sans-serif;
 color: #333333;
}

/* Container CSS Attributes*/
h1 {
 //color: #333333;
 text-align: center;
 margin: 0px;
    padding: 0px;
}


/* Container CSS Attributes*/
h2 {
 color: white;
 text-align: center;
 margin: 0px;
    padding: 0px;
}



/* Highlight background color */
::selection {
  background: #6ab014; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #6ab014; /* Gecko Browsers */
}


/**********************************
Containers
**********************************/

/* Container CSS Attributes*/
.container {
 position: relative;
 padding-top: 5px;
 padding-bottom: 5px;
 width: 100%;
 margin:0;
}

.h2-container {
 background-color: #6ab014;
}

/********* Side Menu **********/

.menu {
    Display:none;
}



/**********************************************************************/
/********* Start CSS for less than or equal to 768px screen ***********/
@media only screen and (max-width:768px){

 
 .header-upper, .footer-external{
  display:none;
 }
 
 .header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #6ab014;
  z-index: 100001;
  height: 75px;
  overflow: hidden;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  transition: height 0.3s;
  text-align: center;
  background-image: url("/images/mobile_expand.svg");
  background-repeat: no-repeat;
 } 
 
 .header.menu-open {
  background-image: url("/images/mobile_retract.svg");
 }
 
 
 .header .header-image  img{
  content:url("/images/logo_mobile.svg");
  height: 50px;
  width: 160px;
  margin-top: 12px;
 }
 
 /********* Disable link to open sub-menu **********/
 .header .header-image a {
    pointer-events: none;
    cursor: pointer;
 }
 
 
 /* Stop header from overlapping container */
 .container {
  position: relative;
  margin-top: 75px;
  width: 100%;
 }
 
 .main {
  position: block;
  width: 90%;
  max-width: 80em;
  margin: 0 auto;
 }
 
 

 
 
 /********* Side Menu **********/
 .menu  {
  position: fixed;
        display:block;
  left: -330px;
  top: 75px;
  background: #87cc33;
  width: 330px;
  bottom: 0;
  z-index: 1000;
  overflow:auto;
  /* Transitions */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
 }

 .menu  ul
 {
  padding: 0;
  margin: 0;
  list-style-type: none;
 }

 
 /* Make menu above others */
 .menu {
  z-index:100;
 }

 /* Open menu CSS */
 .menu.menu-open {
  left: 0px;
 }
 

  
 /********* Navigation Sub-menus **********/
 .menu .nav-lvl-2.sub-menu-open-mobile{
  /* Max-height may have to change with more sublinks */
  max-height: 1000px;
  display: block;
  opacity: 1;
 }

 .menu .nav-lvl-2 {
  background: #a5e25b;
  max-height: 0px;
  display: none;
  opacity: 0;
  /* Transitions */
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
 }

 .menu .nav-lvl-2 a {
  border-bottom: 1px solid #fff;
 }
 

 /********* Disable links to open sub-menu **********/
 .has-sub-menu {
    pointer-events: none;
    cursor: pointer;
 }

 .menu li:hover {
  cursor: pointer;
 }



 /********* Link CSS **********/
 .menu a{
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
  border-bottom: 1px solid #a5e25b;
  padding: 1em;
  text-decoration: none;
 }


 
 /******* Mobile dropdown arrow - down *********/
 a.has-sub-menu:not(.sub-menu-open-mobile):before {
  position: absolute;
  content: "";
  left: 290px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid #fff;
  margin-top: 7px;
 }

 /******* Mobile dropdown arrow - up *********/
 a.has-sub-menu.sub-menu-open-mobile:before {
  position: absolute;
  content: "";
  left: 290px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid #fff;
  margin-top: 7px;
 }



 /******* dropdown link css *********/
 a.has-sub-menu:hover:before,
 a.has-sub-menu:focus:before,
 a.has-sub-menu:active:before {
   border-color: transparent #730800;
 }

 a.has-sub-menu:hover:after,
 a.has-sub-menu:focus:after,
 a.has-sub-menu:active:after {
   border-color: #730800;
 }
 
 
 /* Stop header from overlapping container */
 .container.first {
  margin-top: 75px;
 }

 
  
 
}
/********* End CSS for less than or equal to 480px screen ***********/
<!DOCTYPE html>



<body>



<div class="header">
 <div class="header-inner">
  <h1 class="header-image"><a href="/"><img src="/images/logo.svg" /></a></h1>
 </div>
</div>
<nav class="menu">
    <ul class="nav-lvl-1">
        <li><a href="/">Home</a></li>
        <li><a class="has-sub-menu" href="/Platform/">Platform</a>
            <ul class="nav-lvl-2">
                <li><a href="http://google.com/">test1</a></li>
                <li><a href="http://google.com/">test2</a></li>
                <li><a href="http://google.com/">test3</a></li>
                <li><a href="http://google.com/">test4</a></li>
            </ul> 
        </li>
        <li><a class="has-sub-menu" href="/modules/">Modules</a>
            <ul class="nav-lvl-2">
                <li><a href="http://google.com/">test1</a></li>
                <li><a href="http://google.com/">test2</a></li>
                <li><a href="http://google.com/">test3</a></li>
                <li><a href="http://google.com/">test4</a></li>
                <li><a href="http://google.com/">test5</a></li>
                <li><a href="http://google.com/">test6</a></li>
                <li><a href="http://google.com/">test7</a></li>
                <li><a href="http://google.com/">test8</a></li>
                <li><a href="http://google.com/">test9</a></li>
                <li><a href="http://google.com/">test10</a></li>
                <li><a href="http://google.com/">test11</a></li>
                <li><a href="http://google.com/">test12</a></li>
            </ul> 
        </li>
        <li><a href="http://google.com/nav">Hosting</a></li>
        <li><a class="has-sub-menu" href="http://google.com/nav">Resources</a>
            <ul class="nav-lvl-2">
                <li><a href="http://google.com/">test1</a></li>
                <li><a href="http://google.com/">test2</a></li>
                <li><a href="http://google.com/">test3</a></li>
                <li><a href="http://google.com/">test4</a></li>
                <li><a href="http://google.com/">test5</a></li>
            </ul> 
        </li>
        <li><a class="has-sub-menu" href="/contact/">Contact Us</a>
            <ul class="nav-lvl-2">
                <li><a href="http://google.com/">test1</a></li>
                <li><a href="http://google.com/">test2</a></li>
                <li><a href="http://google.com/">test3</a></li>
            </ul> 
        </li>
    </ul>
</nav>



<!-- Begin Container -->
<div class="container h2-container"> 
 <div class="main">
  <h2> 
   H2 Title
  </h2>
 </div>
</div>

<!-- Begin Container -->
<div class="container"> 
 <div class="main">
  
 </div>
</div>
<!-- End Container -->

<!-- Begin Container -->
<div class="container"> 
 <div class="main">
  This is content.  
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
 </div>
</div>



<!-- Begin Container -->
<div class="container"> 
 <div class="main">
  This is content.  This is the last container.
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  This is content
  <br><br><br>
  Final content in the document.
 </div>
</div>
<!-- End Container -->