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

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

Как организовать чтобы модуль с меню сдвигался вниз вместе с прокруткой?

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

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

Пол: Мужской
Сообщений: 37



« : 13.04.2010, 08:34:58 »

Гуглил, гуглил и невыгуглил....

Как организовать чтобы модуль меню в позиции right и модуль корзины в left сдвигался вниз вместе с прокруткой страницы, когда прокручиваешь список товаров? Т.е. чтобы меню и корзина были всегда навиду. Не встречал ли кто таких решений? Подскажите в какую сторону копать...

(Менюшка - модуль вывода категорий virtuemart. Корзина от S5, хотя вроде это не принципиально что выводится в модулях, главное чтобы сдвигались вниз при прокрутке)
 
Записан
johny_nk
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 37



« Ответ #1 : 13.04.2010, 09:19:40 »

это в CSS шаблона шаманить? можно чуток подробнее?
Записан
effrit
Группа развития
*****

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

Пол: Мужской
Сообщений: 6824


effrit.com


« Ответ #2 : 13.04.2010, 09:39:57 »

есть готовое, но платное решение
http://blogomunity.com/joomla-extensions/joomla-templates-modules/modulation.html
Записан
effrit
Группа развития
*****

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

Пол: Мужской
Сообщений: 6824


effrit.com


« Ответ #3 : 13.04.2010, 11:32:44 »

я просто указал, что готовое решение с ДВИЖЕНИЕМ есть.
что с этим делать-решать топикстартеру )
Записан
johny_nk
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 37



« Ответ #4 : 13.04.2010, 20:30:18 »

Спасибо effrit, именно то что искал. Нашел в варезниках,  установил plg_modulation_1.1.0 Только у меня как всегда все просто и гладко не бывает, не работает с шаблоном от Yootheme Explorer, на нем все сделано. С другими шаблонами без проблем, а на yoo_explorer не двигаются модули. Что бы это могло быть? Настройками шаблона поигрался, на чистой Joomla проверил и там та же история, со всеми работает, кроме последних yootheme шаблонов...

Кстати по поводу решения - слою в CSS прописать fixed... я так понял не совсем подходит, если допустим модуль который должен плавать будет длиннее чем высота окна браузера, низ модуля будет недоступен... как мне кажется.
Записан
effrit
Группа развития
*****

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

Пол: Мужской
Сообщений: 6824


effrit.com


« Ответ #5 : 13.04.2010, 21:01:23 »

ну тут ужо ничем не помогу-в скриптах не пномпень )
обычно переписывают имена функций/переменных для скриптов, чтобы не перекрывались.
но это надо кого-то умного спросить. а умные в варез не полезут )
Записан
johny_nk
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 37



« Ответ #6 : 15.04.2010, 15:58:36 »

Все получилось. Отписываюсь, может кому пригодится...
1. Плагин modulation от blogomunity.com в принципе можно найти в свободном доступе если поискать. 
2. На последних шаблонах от Yootheme плагин не работает, фиксится это изменением в файле шаблона index.php строк "объявления модулей и их стилей:
было
<jdoc:include type="уооmodules" name="left" style="yoo" />
исправить на
<jdoc:include type="modules" name="left" style="yoo" />

соответственно для правой колонки
<jdoc:include type="yoomodules" name="right" style="yoo" />
меняем на
<jdoc:include type="modules" name="right" style="yoo" />

кому пригодилось - ставим + Azn
Записан
lion2005
Захожу иногда
**

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

Сообщений: 21


« Ответ #7 : 08.12.2010, 12:32:34 »

уже давно пользуюсь плагином modulation, но он меня не устраивает, т.к. движение колонки происходит прыжками, рывками, а хочется чтобы было как у рокетов на сайте: http://www.rockettheme.com/joomla-templates

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

т.е., если разрешение экрана небольшое, а страница с контентом длинная и длина перемещающейся колонки тоже больше высоты экрана монитора, в идеале хочется достичь того, чтобы при скроллинге контрольными точками выстапали начало и конец колонки

если есть возможность изменить этот плагин или найти другое решение, посоветуйте, пожалуйста
Записан
johny_nk
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 37



« Ответ #8 : 17.01.2011, 23:32:01 »

время задержки прокрутки ставьте около 3-4 сек, тогда без проблем можно успеть нажать если "ездящий" модуль длинный...
Записан
lion2005
Захожу иногда
**

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

Сообщений: 21


« Ответ #9 : 17.01.2011, 23:36:14 »

рокеты свой шаблон переверстали, плавающего модуля уже нет
Записан
jaxy
Гость
« Ответ #10 : 04.03.2011, 17:27:09 »

Все получилось. Отписываюсь, может кому пригодится...
1. Плагин modulation от blogomunity.com в принципе можно найти в свободном доступе если поискать. 
2. На последних шаблонах от Yootheme плагин не работает, фиксится это изменением в файле шаблона index.php строк "объявления модулей и их стилей:
было
<jdoc:include type="уооmodules" name="left" style="yoo" />
исправить на
<jdoc:include type="modules" name="left" style="yoo" />

соответственно для правой колонки
<jdoc:include type="yoomodules" name="right" style="yoo" />
меняем на
<jdoc:include type="modules" name="right" style="yoo" />

кому пригодилось - ставим + Azn

К моему огромному сожалению файл index.php шаблона explorer не содержит строк <jdoc:include type="уооmodules" name="left" style="yoo" /> =(( Получается поднастроить не выходит... и плагин с yootheme шаблоном не работает=(
Плагин бы мне ооочень пригодлся... но у самого решить проблемку не выходит... =) Если кто сталкивался с подобной проблемой... или кто просто в курсе как она решаеЦЦо прошу помощи!
Записан
Taatshi
Support Team
*****

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

Пол: Женский
Сообщений: 4718

Мама, я снова верстал во сне...


« Ответ #11 : 22.05.2011, 19:06:56 »

Уныло... Почему никто не послушал NightGuard?  Одну строчку в стиль вписать(((((  И модули, и проблемы с ними... NightGuard, ставлю тебе плюсик.

А насчет длины модуля - если он такой длинный, значит, не продумана каталогизация. Таким меню пользоваться крайне неудобно.
« Последнее редактирование: 22.05.2011, 19:10:02 от Taatshi » Записан
stef21
Осваиваюсь на форуме
***

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

Сообщений: 152


« Ответ #12 : 05.10.2011, 10:34:46 »

Подскажите подробней какую строчку прописать и где, я в CSS ни чего не смыслю, подскажите если не трудно.
Записан
Takohashi
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 70


« Ответ #13 : 27.01.2012, 14:34:42 »

Уныло... Почему никто не послушал NightGuard?  Одну строчку в стиль вписать(((((  И модули, и проблемы с ними... NightGuard, ставлю тебе плюсик.
"Уныло" — это то, как будет выглядеть результат, если воспользоваться советом, который вы с NightGuard рекомендуете. А мне вот тоже нужная фиксированнная позиция при скроллинге, но чтобы это выглядело следующим образом — http://www.apple.com/finalcutpro/all-features/ Т.е. мне нужно, чтобы меню при скроллинге двигалось вместе со всем содержимым страницы вверх, затем при достижении самого верха оно останавливалось; аналогично и ситуация с низом страницы. (Анимированные переключения пунктов мне не нужны).
Кто-нибудь подскажет, как такое можно организовать? Всё уже обыскал.
Записан
tefun
Практически профи
*******

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

Пол: Мужской
Сообщений: 2615


Легче всего обмануть себя


« Ответ #14 : 27.01.2012, 14:44:14 »

Всё уже обыскал.
тут походу самописный модуль, но не меню (походу и ссылочки ручками добавлять надо будет) + то что NightGuard сказал + ссылки с якорем на текст
Записан
Takohashi
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 70


« Ответ #15 : 27.01.2012, 14:49:16 »

тут походу самописный модуль, но не меню (походу и ссылочки ручками добавлять надо будет) + то что NightGuard сказал + ссылки с якорем на текст
Понятное дело, что на сайте эпла и модуль самописный и сам сайт не на Джумлe Smiley Меня интересует какой-нибудь похожий аналог под Джумлy, ведь наверняка он должен быть. Нужно всего-то, чтобы у меню был такой же принцип позиционирования на странице при скроллинге.
Записан
tefun
Практически профи
*******

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

Пол: Мужской
Сообщений: 2615


Легче всего обмануть себя


« Ответ #16 : 27.01.2012, 14:55:27 »

Понятное дело, что на сайте эпла и модуль самописный и сам сайт не на Джумлe Smiley Меня интересует какой-нибудь похожий аналог под Джумлy, ведь наверняка он должен быть. Нужно всего-то, чтобы у меню был такой же принцип позиционирования на странице при скроллинге.
нет ты не понял, я говорю сам модуль самописный под любую CMS - тк тебе надо ссылы-якоря - а это не меню уже, Конечно можно сделать модулем меню+то что NightGuard сказа+ссылку прописать в пункте меню якорем, но тогда будет перезагрузка стр и то что тебе надо, поэтому я говорю что писать надо
наврятли найдешь, я дык думаю это не очень сложно, хотя сам писать не умею Sad

главная фиша в том что тебе надо без перезагрузки+то что NightGuard сказа+якоря на текст в материале, просто интересно сколько у тебя будет стр грузиттся если много материала буэт

но вот как сделать чтобы меню переключалось само кода ты по материалу ходишь - вот это загадка, такого еще не видел
« Последнее редактирование: 27.01.2012, 14:59:07 от tefun » Записан
Takohashi
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 70


« Ответ #17 : 27.01.2012, 16:36:30 »

Цитировать
главная фиша в том что тебе надо без перезагрузки+то что NightGuard сказа+якоря на текст в материале, просто интересно сколько у тебя будет стр грузиттся если много материала буэт
Да нет. Ты не понял. Мне не нужно, чтобы весь контент был на одной странице. Вот допустим у меня есть 10 разных страниц, и есть меню, которое состоит из 10 пунктов, где каждый пункт ссылается на каждую из этих страниц. Так вот, мне всего лишь нужно, чтобы это меню находилось в поле зрения, но чтобы оно не просто было прилеплено через position: fixed, а чтобы оно скроллилось, но останавливалось вверху страницы.

Короче, сделал вот так — http://html-css.info/2010/06/jquery-position-fixed/ Smiley Вроде работает.
Ещё как вариант — http://awesome-design.com/stati/javascript/fiksirovannoe-vertikalnoe-menyu.html
Записан
tefun
Практически профи
*******

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

Пол: Мужской
Сообщений: 2615


Легче всего обмануть себя


« Ответ #18 : 27.01.2012, 16:45:11 »


Короче, сделал вот так — http://html-css.info/2010/06/jquery-position-fixed/ Smiley Вроде работает.
да тут попроще,
терь ясно, все гораздо проще Azn оказалось
просто я то думал что точь в точь нуна Azn
Записан
Takohashi
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 70


« Ответ #19 : 27.01.2012, 16:51:44 »

Ну да, попроще, мне как раз это и надо было. Единственное, что не очень радует — его "плавучесть" при скроллинге, хотелось бы, чтобы он был просто зафиксирован вверху.
Записан
tefun
Практически профи
*******

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

Пол: Мужской
Сообщений: 2615


Легче всего обмануть себя


« Ответ #20 : 27.01.2012, 16:53:50 »

Ну да, попроще, мне как раз это и надо было. Единственное, что не очень радует — его "плавучесть" при скроллинге, хотелось бы, чтобы он был просто зафиксирован вверху.
ответ 1 Любой модуль, через див +  position: fixed; ? впринцыпе...так и грузится буэт легче
Записан
Takohashi
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 70


« Ответ #21 : 27.01.2012, 17:00:14 »

ответ 1 Любой модуль, через див +  position: fixed; ? впринцыпе...так и грузится буэт легче
Да нет же) Ещё раз: модуль с меню изначально располагается не в самом верху, а с отступом допустим в 300рх, потому что эти самые 300рх занимает шапка сайта. Когда юзер скроллит страницу, вверх поднимается весь контент, включая шапку и меню. Затем, когда меню достигло верха, оно останавливается в этой позиции. Вот как соц. закладки на этом сайте.
Записан
tefun
Практически профи
*******

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

Пол: Мужской
Сообщений: 2615


Легче всего обмануть себя


« Ответ #22 : 27.01.2012, 17:05:03 »

понял,
кстати стрелочки удобно выполняют функцию кнопки "вверх" и даже  "вниз"
Записан
xabbep
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 44



« Ответ #23 : 19.04.2012, 01:03:19 »

Да нет же) Ещё раз: модуль с меню изначально располагается не в самом верху, а с отступом допустим в 300рх, потому что эти самые 300рх занимает шапка сайта. Когда юзер скроллит страницу, вверх поднимается весь контент, включая шапку и меню. Затем, когда меню достигло верха, оно останавливается в этой позиции. Вот как соц. закладки на этом сайте.

«Плавающее» фиксированное меню

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

Задаём высоту шапки в виде отступа сверху в CSS для блока, содержащего меню (на примере: #modul_fixed):

CSS:
Код:
#modul_fixed{
   top: 240px; /** высота шапки в пикселях**/
   position: fixed;
   z-index: 1000;
   left: 20px;
}

javascript код, и поместим его в содержимое web-страницы:
Код:
<script type="text/javascript">
var m1 = 240; /* высота шапки в пикселях */
var m2 = 20; /* отступ, когда во время прокрутки шапка
 уже не видна */

/* функция кроссбраузерного определения
отступа от верха документа к текущей позиции
скроллера прокрутки */

function getScrollTop() {
           var scrOfY = 0;
           if( typeof( window.pageYOffset ) == "number" ) {
                   //Netscape compliant
                   scrOfY = window.pageYOffset;
           } else if( document.body
           && ( document.body.scrollLeft
           || document.body.scrollTop ) ) {
                   //DOM compliant
                   scrOfY = document.body.scrollTop;
           } else if( document.documentElement
           && ( document.documentElement.scrollLeft
            || document.documentElement.scrollTop ) ) {
                   //IE6 Strict
                   scrOfY = document.documentElement.scrollTop;
           }
           return scrOfY;
}

/* функция, которая устанавливает верхний отступ
 для «плавающего» фиксированного вертикального
меню в зависимости от положения
 скроллера и видимости шапки */


function marginMenuTop() {
var top  = getScrollTop();
var s = document.getElementById("modul_fixed");
if (top+m2 < m1) {
s.style.top = (m1-top) + "px";
} else {
s.style.top = m2 + "px";
}
}

/** функция регистрирует
вычисление позиции
 «плавающего» меню при прокрутке страницы
**/

function setMenuPosition(){

if(typeof window.addEventListener != "undefined"){
window.addEventListener("scroll", marginMenuTop, false);

} else if(typeof window.attachEvent != "undefined"){
window. attachEvent("onscroll", marginMenuTop);
}


}

/** регистрируем вызов
необходимых функций после
 загрузки страницы **/

if(typeof window.addEventListener != "undefined"){
window.addEventListener("load", setMenuPosition, false);

} else if(typeof window.attachEvent != "undefined"){
window. attachEvent("onload", setMenuPosition);
}


</script>

Где:

var m1 = 240, #modul_fixed{ top: 240px; } - высота шапки в пикселях
var m2 = 20 - отступ, когда во время прокрутки шапка уже не видна
getScrollTop() - функция кросс браузерного определения отступа от верха документа к текущей позиции скроллера прокрутки
marginMenuTop() - функция, которая устанавливает верхний отступ для меню в зависимости от положения скроллера и видимости шапки
setMenuPosition()– функция регистрирует вычисление позиции «плавающего» фиксированного меню при скроллинге страницы
Записан
Takohashi
Осваиваюсь на форуме
***

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

Пол: Мужской
Сообщений: 70


« Ответ #24 : 19.04.2012, 01:32:47 »

xabbep, слишком громоздкий у вас скрипт. Я всё сделал куда проще:
Код
<script>
$(document).ready(function () {  
 var top = $('#pinned-menu').offset().top - parseFloat($('#pinned-menu').css('marginTop').replace(/auto/, 0));
 $(window).scroll(function (event) {
   var y = $(this).scrollTop();
   if (y >= top) {
     $('#pinned-menu').addClass('fixed');
   } else {
     $('#pinned-menu').removeClass('fixed');
   }
 });
});
</script>
Записан
v-idea
Давно я тут
****

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

Пол: Мужской
Сообщений: 202



« Ответ #25 : 25.06.2015, 17:19:53 »

xabbep, слишком громоздкий у вас скрипт. Я всё сделал куда проще:

Отличное, компактное решение! Плюсую в карму за это!
У кого не работает так, то можно заменить знак - '$' на 'jQuery'

Гуглил, гуглил и невыгуглил....


Ну по этому поводу могу сказать, что значит так хорошо гуглил...
Вот такое вот решение и не одно, очень легко мне нашёл поисковик:

http://shpargalkablog.ru/2013/09/scroll-block.html
Записан
Страниц: [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