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

johny_nk

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

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

« : 13.04.2010, 08:34:58 »

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

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

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

Записан

johny_nk

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

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

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

это в CSS шаблона шаманить? можно чуток подробнее?

Записан

effrit

Легенда
10132
1118 / 13
effrit.com

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

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

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

Записан

Вредные советы свежеиспечённым форумчанам | SimpleInformer - модуль календаря/реминдера
Сервис для чистки HTML таблиц из Word и Excel | Extra ToC - плагин автогенерации оглавления страницы

effrit

Легенда
10132
1118 / 13
effrit.com

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

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

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

Записан

Вредные советы свежеиспечённым форумчанам | SimpleInformer - модуль календаря/реминдера
Сервис для чистки HTML таблиц из Word и Excel | Extra ToC - плагин автогенерации оглавления страницы

johny_nk

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

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

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

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

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

Записан

effrit

Легенда
10132
1118 / 13
effrit.com

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

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

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

Записан

Вредные советы свежеиспечённым форумчанам | SimpleInformer - модуль календаря/реминдера
Сервис для чистки HTML таблиц из Word и Excel | Extra ToC - плагин автогенерации оглавления страницы

johny_nk

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

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

« Ответ #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" />

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

Записан

lion2005

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

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

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

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

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

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

если есть возможность изменить этот плагин или найти другое решение, посоветуйте, пожалуйста

Записан

johny_nk

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

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

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

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

Записан

lion2005

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

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

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

рокеты свой шаблон переверстали, плавающего модуля уже нет

Записан

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

« Ответ #10 : 04.03.2011, 16:27:09 »

Цитата: johny_nk от 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" />

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

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

Записан

Taatshi

Гуру
5258
481 / 2
Верстаем и кодим. Обращайтесь ;)

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

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

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

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

« Последнее редактирование: 22.05.2011, 19:10:02 от Taatshi »

Записан

ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ | ОТЗЫВЫ
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi

stef21

Захожу иногда
156
8 / 0

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

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

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

Записан

Takohashi

Захожу иногда
69
10 / 3

Re: Как организовать чтобы модуль с меню сдви

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

Цитата: Taatshi от 22.05.2011, 19:06:56

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

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

Записан

tefun

Живу я здесь
2540
130 / 1
Легче всего обмануть себя

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

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

Цитата: Takohashi от 27.01.2012, 14:34:42

Всё уже обыскал.

тут походу самописный модуль, но не меню (походу и ссылочки ручками добавлять надо будет) + то что NightGuard сказал + ссылки с якорем на текст

Записан

то что постится на фОруме, не вырубается тапОрами
_______________________________________________
Мысли и женщины вместе не приходят М.Ж.

Takohashi

Захожу иногда
69
10 / 3

Re: Как организовать чтобы модуль с меню сдви

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

Цитата: tefun от 27.01.2012, 14:44:14

тут походу самописный модуль, но не меню (походу и ссылочки ручками добавлять надо будет) + то что NightGuard сказал + ссылки с якорем на текст

Понятное дело, что на сайте эпла и модуль самописный и сам сайт не на Джумлe

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

Записан

tefun

Живу я здесь
2540
130 / 1
Легче всего обмануть себя

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

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

Цитата: Takohashi от 27.01.2012, 14:49:16

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

нет ты не понял, я говорю сам модуль самописный под любую CMS - тк тебе надо ссылы-якоря - а это не меню уже, Конечно можно сделать модулем меню+то что NightGuard сказа+ссылку прописать в пункте меню якорем, но тогда будет перезагрузка стр и то что тебе надо, поэтому я говорю что писать надо
наврятли найдешь, я дык думаю это не очень сложно, хотя сам писать не умею

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

но вот как сделать чтобы меню переключалось само кода ты по материалу ходишь - вот это загадка, такого еще не видел

« Последнее редактирование: 27.01.2012, 14:59:07 от tefun »

Записан

то что постится на фОруме, не вырубается тапОрами
_______________________________________________
Мысли и женщины вместе не приходят М.Ж.

Takohashi

Захожу иногда
69
10 / 3

Re: Как организовать чтобы модуль с меню сдви

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

Цитировать

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

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

Короче, сделал вот так — http://html-css.info/2010/06/jquery-position-fixed/

Вроде работает.
Ещё как вариант — http://awesome-design.com/stati/javascript/fiksirovannoe-vertikalnoe-menyu.html

Записан

tefun

Живу я здесь
2540
130 / 1
Легче всего обмануть себя

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

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

Цитата: Takohashi от 27.01.2012, 16:36:30

Короче, сделал вот так — http://html-css.info/2010/06/jquery-position-fixed/ Вроде работает.

да тут попроще,
терь ясно, все гораздо проще

оказалось
просто я то думал что точь в точь нуна

Записан

то что постится на фОруме, не вырубается тапОрами
_______________________________________________
Мысли и женщины вместе не приходят М.Ж.

Takohashi

Захожу иногда
69
10 / 3

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

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

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

Записан

tefun

Живу я здесь
2540
130 / 1
Легче всего обмануть себя

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

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

Цитата: Takohashi от 27.01.2012, 16:51:44

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

ответ 1 Любой модуль, через див + position: fixed; ? впринцыпе...так и грузится буэт легче

Записан

то что постится на фОруме, не вырубается тапОрами
_______________________________________________
Мысли и женщины вместе не приходят М.Ж.

Takohashi

Захожу иногда
69
10 / 3

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

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

Цитата: tefun от 27.01.2012, 16:53:50

ответ 1 Любой модуль, через див + position: fixed; ? впринцыпе...так и грузится буэт легче

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

Записан

tefun

Живу я здесь
2540
130 / 1
Легче всего обмануть себя

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

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

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

Записан

то что постится на фОруме, не вырубается тапОрами
_______________________________________________
Мысли и женщины вместе не приходят М.Ж.

xabbep

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

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

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

Цитата: Takohashi от 27.01.2012, 17:00:14

Да нет же) Ещё раз: модуль с меню изначально располагается не в самом верху, а с отступом допустим в 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

Захожу иногда
69
10 / 3

Re: Как организовать чтобы модуль с меню сдви

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

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

Код: javascript

<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

Захожу иногда
210
35 / 0

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

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

Цитата: Takohashi от 19.04.2012, 01:32:47

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

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

Цитата: johny_nk от 13.04.2010, 08:34:58

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

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

http://shpargalkablog.ru/2013/09/scroll-block.html

Записан

Русифицированный компонент Widgetkit v1.0.2_27.02 Joomla! | Классический шаблон Rhuk Milkyway Ext 25 для Joomla 1.6/1.7/2.5/3.0

Плагин/модуль для встраивания видео с Дзена или ВК Автор KingSnake	Ответов: 0 Просмотров: 5281	03.12.2024, 15:32:02 от KingSnake
Модуль голосования Автор Grandrom	Ответов: 0 Просмотров: 4348	21.11.2024, 10:45:04 от Grandrom
[Решено] j5.2 + PHP модуль Автор x1	Ответов: 0 Просмотров: 4407	05.09.2024, 10:26:19 от x1
Модуль "Скачать фаил" Автор Alex_iPod	Ответов: 6 Просмотров: 4927	07.06.2024, 14:09:11 от Alex_iPod
Модуль отображения сообщений группы телеграмм на сайте Автор kunsaid	Ответов: 2 Просмотров: 4799	08.02.2024, 13:13:27 от kunsaid

👩‍💻 Компонент "CS Афиши" для Joomla.

Яндекс выпустил инструмент Видимость сайта в Алисе AI.

👩‍💻 ИИ-админ для Joomla ближе, чем вы думаете: Joomla MCP.

Похожие темы