1

Есть боковое меню реализованное вот таким способом

$(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>

Работает в firefox и edge на ПК и моб устройствах. Не могу понять в чём может быть проблема. При свайпе в других браузерах класс к элементу добавляется, но он не выезжает, так же на замену свайпу присутствует кнопка поведение которой полностью идентично.

12
  • 1
    Попробуйте сделать минимальный самостостаточный пример, чтобы можно было запустить в любом браузере и поотлаживать. Возможно, в вашем случае достаточно буде добавить HTML разметку к уже существующему коду в вопросу. Кстати, для HTML/JS/CSS примеров вы можете использовать сниппеты.
    – Uranus
    19 ноя 2017 в 6:34
  • 1
    Кстати, попробуйте еще поотаживать самостоятельно.
    – Uranus
    19 ноя 2017 в 6:35
  • 1
    Вставил сниппет, открыл его в 2х браузерах и в хроме он не работает 19 ноя 2017 в 7:01
  • Открыл с оперы, не работает данный пример, в Mozilla-Е тоже самое, в хроме уже не стал проверять...
    – Air
    19 ноя 2017 в 7:36
  • Исправил, спасибо. Но по прежнему не понятно почему не работает 19 ноя 2017 в 7:47

1 ответ 1

2

Причиной ошибки в Chome была простая невнимательность, надо было убрать вот эту строку из-за которой корректно отображалось только в некоторых браузерах

(проверял зайдя со всей техники дома имеющей доступ в интернет)

.container{
  position:sticky;
}

Почему некоторые браузеры игнорировали это - странно

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.