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

addrss

Осваиваюсь на форуме
34
0 / 0

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

« : 07.06.2015, 15: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, 16:37:52 от addrss »

Записан

addrss

Осваиваюсь на форуме
34
0 / 0

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

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

Нашел решение через медиа запросы.
в template.css после стиля .fixed дописал:

Код

@media screen and (max-height: 600px) {
     .fixed { 
     overflow: auto!important;
     max-height:50%!important;
 }
   }

Записан

addrss

Осваиваюсь на форуме
34
0 / 0

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

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

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

Код

@media only handheld and (max-height: 600px) {
     .fixed { 
	 overflow: auto!important;
	 max-height: 50%!important;
 }
}

Записан

В новом шаблоне не адаптируется изображение Автор Ebelous	Ответов: 4 Просмотров: 4679	13.02.2024, 17:01:12 от Vastriet
Как уменьшить отступ между Title и Components в шаблоне Helix3 Автор artem_wrong	Ответов: 21 Просмотров: 8439	17.06.2022, 22:42:47 от Scaltro
Кликабельность псевдоэлемента в пункте меню Автор vasilii.pupkov	Ответов: 4 Просмотров: 14987	29.12.2021, 23:15:38 от v42bis
Выпадающее меню Автор DrShepard	Ответов: 10 Просмотров: 14095	20.10.2021, 12:36:16 от DrShepard
Как убрать боковые отступы в мобильной версии шаблона? Автор Евгений1980	Ответов: 2 Просмотров: 3246	18.01.2021, 18:24:53 от arma

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

Новости Joomla

Вышли релизы безопасности Joomla 6.1.4 и Joomla 5.4.9

JoomShift - компонент переноса контента между Joomla сайтами.

addrss

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

addrss

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

addrss

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

Похожие темы