Форум русской поддержки Joomla!® CMS
10.12.2016, 14:53:40 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как убрать полосы прокрутки в фиксированном меню на JQuery в адаптивном шаблоне?

 (Прочитано 597 раз)
0 Пользователей и 1 Гость смотрят эту тему.
addrss
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 41


« : 07.06.2015, 16:05:05 »

Добрый день. Помогите разобраться.

Для работы фиксированного меню IceMegaMenu на JQuery написаны два CSS класса меню  - .default и .fixed.

Для скроллинга меню в мобильной версии сайта в стиле .fixed установлены значения overflow: auto; и max-height: 50%;
В мобильной версии сайта развернутое меню занимает максимум 50% страницы и прокручиваются все не влазящие пункты меню, что дает возможность прокручивать и меню и контент. Но в обычной версии сайта фиксированное меню полностью не разворачивается и появляется полоса прокрутки.

Если отключить overflow: auto; и max-height: 50%;, то в мобильной версии сайта на маленmких экранах меню раскрывается  не полностью: по высоте не влазят все пункты меню и нет возможно скроллинка.
 
Все примеры на видео: http://www.yapfiles.ru/show/1174253/02a4520dd929a52cacdfa96b0710c138.mp4.html

Как убрать полосы прокрутки в обычной версии сайта с помощью CSS или Javascrip и эффектов JQuery?
Или как назначить разные классы меню для обычной и мобильной версий сайта?

Классы меню:

Код:
/* IceMegaMenu */
#mainmenu {
/*  position: relative;*/
  background-color: #3d3d3d;
  background: -moz-linear-gradient(top, #484848, #2e2e2e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#484848), to(#2e2e2e));
  background: -webkit-linear-gradient(top, #484848, #2e2e2e);
  background: -o-linear-gradient(top, #484848, #2e2e2e);
  background: linear-gradient(to bottom, #484848, #2e2e2e);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484848', endColorstr='#ff2e2e2e', GradientType=0);
  clear: both;
  margin: 0 0 30px;
  border-radius: 7px 8px 8px 7px;
  /* Search */

}

.default {
position: relative;
top: 0;
  left: 0;
  height: 55px;
  background: url(../images/mainmenu.png) no-repeat;
  width: 100%;
  border-radius: 7px;
}
.fixed {
position: fixed;
overflow: auto;
z-index:15000;
width:100%;
top:0;
right:0;
left:0;
max-height:50%;
}

#mainmenu:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 55px;
  background: url(../images/mainmenu.png) no-repeat;
  width: 100%;
  border-radius: 7px;
}



Скрипт фиксированного меню на JQuery:
Код:
jQuery(document).ready(function(){

 

        var jQuerymenu = jQuery("#mainmenu");

 

        jQuery(window).scroll(function(){

            if ( jQuery(this).scrollTop() > 100 && jQuerymenu.hasClass("default") ){

                jQuerymenu.removeClass("default").addClass("fixed");

            } else if(jQuery(this).scrollTop() <= 100 && jQuerymenu.hasClass("fixed")) {

                jQuerymenu.removeClass("fixed").addClass("default");

            }

        });//scroll

    });
« Последнее редактирование: 07.06.2015, 17:37:52 от addrss » Записан
addrss
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 41


« Ответ #1 : 08.06.2015, 12:05:08 »

Нашел решение через медиа запросы.
в template.css после стиля .fixed дописал:
Код:
@media screen and (max-height: 600px) {
     .fixed {
     overflow: auto!important;
     max-height:50%!important;
 }
   }
Записан
addrss
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 41


« Ответ #2 : 08.06.2015, 12:50:04 »

Добавлю небольшую поправку, если кто-то столкнется с такой же проблемой: в коде лучше прописать only handheld, это значит что стиль будет применяться только для мобильных устройств. Иначе прокрутка останется, если окно браузера на десктопе уменьшить до высоты 600px

Код:
@media only handheld and (max-height: 600px) {
     .fixed {
overflow: auto!important;
max-height: 50%!important;
 }
}
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet