1

Друзья, прошу сразу обратить внимание на сайт: Сайт

Я делаю мобильную версию. В хедере есть кнопка открытия меню. Как только я на нее нажимаю, контент выдвигается и становится видна левая панель. Для того что бы контент не скролился я отключаю скроллинг функцией Scroll

Вот она:

function Scroll(str)
    {
      var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
      ];

      if(str=="off")
      {
        var html = jQuery("html");
        html.data("scroll-position", scrollPosition);
        html.data("previous-overflow", html.css("overflow"));
        html.css("overflow", "hidden");
        window.scrollTo(scrollPosition[0][1], scrollPosition[1][0]);
        $(".contentlayer").bind("touchmove", function(e){e.preventDefault()});
      }
      else
      {
        var html = jQuery("html");
        var scrollPosition = html.data("scroll-position");
        html.css("overflow", html.data("previous-overflow"));
        window.scrollTo(scrollPosition[0], scrollPosition[1]);
        $(".contentlayer").unbind("touchmove");
      }
    }

Если контент на сайте НЕ БЫЛ прокручен, то есть мы находимся на позиции 0 0 то все работает нормально. Если же прокрутить контент немного вниз, а затем нажать на кнопку меню, то происходят скачки. Сначало моментальный подьем в точку 0 0 а затем выдвигание панели и кривая анимация. Как только мы жмем на меню еще раз, то блок с контентом задвигается и устанавливается позиция та которая была.

ВОПРОС: как убрать скачек? Я хочу что бы при прокрутке контента, и нажатия на кнопку меню блок с контентом не поднимался в 0 0, а просто остался так как есть, но скрол при этом был отключен.

Все css и функции можно просмотреть в принципе в исходном коде страницы.

1 ответ 1

2

Я для себя выбрал следующий вариант решения данной проблемы:

  1. Для body задаем:

    body {
      overflow-x:hidden;
      overflow-y:auto;
    }
    
  2. Добавляем новый класс для body, например, .fixed:

    body.fixed {  
      overflow:hidden;
    }
    
  3. При открытии/закрытии меню добавляем/удаляем у body класс .fixed. Например, так:

    $('.menu').on('click',function() {
      $('body').toggleClass('fixed');
    });
    
4
  • Простите, а вы можете помочь еще разобраться, я уже вроде как сделал то что хотел, теперь контент уже остается на том месте что и был если его проскролили, но теперь у меня при открывании и отрабатывании анимации передергивается зеленая панель. никак не могу понять в чем собственно дело. уже мучаюсь целый день никакого результата
    – WhoIsDT
    14 июл 2017 в 12:05
  • @iSeeDev что значит передергивается?
    – Cheg
    14 июл 2017 в 12:18
  • Если можно, попробуйте зайти на сайт с телефона, затем спуститесь в низ главной страницы и попробуйте открыть меню. вы увидите всю проблему, с которой я мучаюсь
    – WhoIsDT
    14 июл 2017 в 12:30
  • @iSeeDev крайне не советую при раскрытии меню выставлять контенту position:fixed. На личном опыте убедился, что при такой варианте на телефонах сильно глючит анимацию. Попробуйте применить мой способ и увидите разнице
    – Cheg
    14 июл 2017 в 12:52

Ваш ответ

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

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