滑动侧边栏菜单在chrome中不起作用

Question

我从那个模板做了菜单

https://www.jqueryscript.net/menu/Touch-Swipeable-Sidebar-Menu-with-jQuery-CSS3.html

但它只适用于firefox / edge / safari（ios）。 并且在chrome / opera和其他浏览器中不起作用

正如我在chrome中的调试（F12）菜单中看到的那样，刷卡js后添加“open-sidebar”类但菜单没有出现在屏幕上

我做错了什么？

 $(window).ready(function(){ $(".swipe-area").swipe({ swipeStatus:function(event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right") { $(".container").addClass("open-sidebar"); return false; } if (phase=="move" && direction =="left") { $(".container").removeClass("open-sidebar"); return false; } } }); }); 

 @media screen and (min-width: 320px) and (max-width: 700px) { body, html { height: 100%; margin: 0; overflow: auto; font-family: helvetica; font-weight: 100; } .container { padding-left:0px; position: fixed; height: 100%; width: 100%; left: 0; -webkit-transition: left 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out; -ms-transition: left 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .container{ position:sticky; } .container.open-sidebar { left: 240px; } .swipe-area { position: absolute; width: 50px; left: 0; top: 0; height: 100%; background: #f3f3f3; z-index: 0; } #sidebar::-webkit-scrollbar { height: 0; width: 0; display: none; } #sidebar::-moz-scrollbar { display: none; } #sidebar { overflow-y: auto; /*background: #e0e0e0;*/ position: absolute; width: 240px; height: 100%; left: -240px; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style-type: square; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: #333; text-decoration: none; display: block; border-bottom: 1px solid #C922; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .main-content { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; } .main-content .content { box-sizing: border-box; -moz-box-sizing: border-box; overflow: auto; padding-left: 60px; width: 100%; } .main-content .content h1 { font-weight: 100; } .main-content .content p { width: 100%; line-height: 160%; } .main-content #sidebar-toggle { background: orange; border-radius: 3px; display: block; position: relative; padding: 10px 7px; float: left; } .main-content #sidebar-toggle .bar { display: block; width: 18px; margin-bottom: 3px; height: 2px; background-color: #fff; border-radius: 1px; } .main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; } #sidebar-overlay { display: none; position: fixed; //background: #fff; opacity: 0.1; width: 100%; height: 100%; z-index: 0; top: 0; left: 0; } .ul_menu, #sidebar { margin: 0; padding: 0; } .sub-nav{ display:none; } #sidebar .dropdown:hover { background: orange; } #sidebar .dropdown .sub-nav { list-style: none; font-style: italic; background: #fff; margin: 0; padding: 0 20px; } #sidebar .dropdown .sub-nav li:not(:last-child) { border-bottom: 1px solid #efefef; } #sidebar .dropdown .sub-nav li a { text-decoration: none; color: black; font-size: 14px; display: block; } #sidebar .dropdown .sub-nav li a:hover { background: orange; } #sidebar .dropdown .sub-nav li:first-child { padding-top:1px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script> <div class="container"> <div id="sidebar" class="topmenu" class="col-sm-12"> <ul id="menu-line" > <li class="dropdown"> <a href="#">Об <span class="caret" ></span></a> <ul class="sub-nav" class="col-sm-12"> <li><a href="#"></a></li> </ul> </li> </ul> </div> <div class="main-content"> <div class="swipe-area"></div> <div class="content"> <h1><===swipe here.</h1> <h1>... Main Content ...</h1> </div> </div> 

顺便说一句，当我形成我的片段时，我发现了我的错误。

.container{
  position:sticky;
}

我不知道为什么在firefox / edge / safari和我的几款Android手机上预装浏览器。

Answer 1

使用transfrom：

 $(window).ready(function(){ $(".swipe-area").swipe({ swipeStatus:function(event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right") { $(".container").addClass("open-sidebar"); return false; } if (phase=="move" && direction =="left") { $(".container").removeClass("open-sidebar"); return false; } } }); }); 

 @media screen and (min-width: 320px) and (max-width: 700px) { body, html { height: 100%; margin: 0; overflow: auto; font-family: helvetica; font-weight: 100; } .container { padding-left:0px; position: fixed; height: 100%; width: 100%; left: 0; -webkit-transition: transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out; -ms-transition: transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; } .container{ position:sticky; } .container.open-sidebar { transform: translate(240px, 0); } .swipe-area { position: absolute; width: 50px; left: 0; top: 0; height: 100%; background: #f3f3f3; z-index: 0; } #sidebar::-webkit-scrollbar { height: 0; width: 0; display: none; } #sidebar::-moz-scrollbar { display: none; } #sidebar { overflow-y: auto; /*background: #e0e0e0;*/ position: absolute; width: 240px; height: 100%; left: -240px; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style-type: square; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: #333; text-decoration: none; display: block; border-bottom: 1px solid #C922; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .main-content { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; } .main-content .content { box-sizing: border-box; -moz-box-sizing: border-box; overflow: auto; padding-left: 60px; width: 100%; } .main-content .content h1 { font-weight: 100; } .main-content .content p { width: 100%; line-height: 160%; } .main-content #sidebar-toggle { background: orange; border-radius: 3px; display: block; position: relative; padding: 10px 7px; float: left; } .main-content #sidebar-toggle .bar { display: block; width: 18px; margin-bottom: 3px; height: 2px; background-color: #fff; border-radius: 1px; } .main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; } #sidebar-overlay { display: none; position: fixed; //background: #fff; opacity: 0.1; width: 100%; height: 100%; z-index: 0; top: 0; left: 0; } .ul_menu, #sidebar { margin: 0; padding: 0; } .sub-nav{ display:none; } #sidebar .dropdown:hover { background: orange; } #sidebar .dropdown .sub-nav { list-style: none; font-style: italic; background: #fff; margin: 0; padding: 0 20px; } #sidebar .dropdown .sub-nav li:not(:last-child) { border-bottom: 1px solid #efefef; } #sidebar .dropdown .sub-nav li a { text-decoration: none; color: black; font-size: 14px; display: block; } #sidebar .dropdown .sub-nav li a:hover { background: orange; } #sidebar .dropdown .sub-nav li:first-child { padding-top:1px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script> <div class="container"> <div id="sidebar" class="topmenu" class="col-sm-12"> <ul id="menu-line" > <li class="dropdown"> <a href="#">Об <span class="caret" ></span></a> <ul class="sub-nav" class="col-sm-12"> <li><a href="#"></a></li> </ul> </li> </ul> </div> <div class="main-content"> <div class="swipe-area"></div> <div class="content"> <h1><===swipe here.</h1> <h1>... Main Content ...</h1> </div> </div>