Плавающий или фиксированный блок при прокрутке.

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

Реализовать такую задумку очень просто с помощью небольшого скрипта на jQuery.

Скачиваете скрипт. Добавляете его в секцию <head> шаблона overall_header.html:

Код: Выделить всё

<script type="text/javascript" src=".../stickyScroll.js"></script>
<script type="text/javascript">
	jQuery(function() {
		jQuery('#scroll').stickyScroll();
	});	
</script>
Не забудьте о наличии библиотеки jQuery и пути до файла.
stickyScroll.rar
502 байт 658 скачиваний
(Скрипт заменён - 17.03.2015 // CabinetAdmin)


По умолчанию в скрипте выставлено "плавание" блока при прокрутке. Её можно отключить, чтобы блок фиксировался на месте.
В начале файла находите:

Код: Выделить всё

duration: 300,
меняете значение на 0, или на любое другое в зависимости от ваших потребностей. Чем выше число, тем медленнее блок движется при прокрутке.

Пример применения мода на правой колонке портала.

Открываете шаблон /portal/portal_body.html, находите место где начинается правая колонка, она отмечена комментарием на вроде <!-- [+] right block area -->. И, если допустим мы хотим зафиксировать всю колонку, после:

Код: Выделить всё

<!-- [+] right block area -->
	<td valign="top" style="width: {PORTAL_RIGHT_COLUMN}px; padding-left:6px;">
		<br style="clear:both" />
добавляете:

Код: Выделить всё

<div id="scroll">
и перед:

Код: Выделить всё

	</td>
<!-- [-] right block area -->
добавляете: Т.е. оборачиваете нужный вам блок в:

Код: Выделить всё

<div id="scroll">
	<!-- фиксированный блок -->
</div>
Вот собственно и всё.

Пример можно посмотреть здесь:
Комментарии: 76

CabinetAdmin 17 мар 2015, 18:20 Сообщение

Заглянул, скрипт не увидел...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 17 мар 2015, 18:35 Сообщение

Странно. В хедере прописанно -

Код: Выделить всё

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://3.1.0.satelitray.ru/stickyScroll.js"></script>
<script type="text/javascript">
	jQuery(function() {
		jQuery('#scroll').stickyScroll();
	});	
</script>
А при просмотре кода страницы скрипт отсутствует. К чему бы это ?
Сейчас прописал в самом хедере, всё равно не работает.

И стиль надо выбрать просильвер.
  • 0

romaamor 26 янв 2016, 19:52 Сообщение

Пытаюсь сделать для блоков портала 3.1.7 по аналогии но не получается. Ставлю так -

Код: Выделить всё

<!-- [+] left module area -->
			<!-- IF S_LEFT_COLUMN -->
		<div id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px;" role="rowgroup">
		<div id="scroll">
			<!-- BEGIN modules_left -->
				<!-- DEFINE $TEMPLATE_FILE = '{modules_left.TEMPLATE_FILE}' -->
				<!-- DEFINE $IMAGE_SRC = '{modules_left.IMAGE_SRC}' -->
				<!-- DEFINE $IMAGE_WIDTH = '{modules_left.IMAGE_WIDTH}' -->
				<!-- DEFINE $IMAGE_HEIGHT = '{modules_left.IMAGE_HEIGHT}' -->
				<!-- DEFINE $CUSTOM_CODE = '{modules_left.CODE}' -->
				<!-- DEFINE $TITLE = '{modules_left.TITLE}' -->
				<!-- DEFINE $MODULE_ID = '{modules_left.MODULE_ID}' -->
				<!-- INCLUDE {$TEMPLATE_FILE} -->
			<!-- END modules_left -->
		</div>
		</div>
		<!-- ENDIF -->		
	<!-- [-] left module area -->
Вроде правильно но не работает. Иди для нового портала надо делать всё по другому ?
  • 0

CabinetAdmin 27 янв 2016, 15:19 Сообщение

Практически, с разницей, что скрипты надо подключать не в хедере, а в футере, например перед <!-- EVENT overall_footer_after -->. Можно воспользоваться всё тем же расширением для добавления содержимого вниз страницы, оно вроде как раз в это место добавляет содержимое.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 27 янв 2016, 17:04 Сообщение

Не получается. Видать там не всё так просто. А также могут мешать фиксированный подвал, фиксированное меню в шапке....
  • 0

CabinetAdmin 27 янв 2016, 17:27 Сообщение

Надо будет попробовать на локалке попробовать поставить...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 27 янв 2016, 17:32 Сообщение

CabinetAdmin писал(а): Надо будет попробовать на локалке попробовать поставить...
А не может быть что конфликт с твоим переделанным расширением фиксированное меню в верху страницы ? Там тот скрипт не мешает ?
http://cabinetadmina.ru/viewtopic.php?f ... 8&start=15
  • 0

CabinetAdmin 27 янв 2016, 18:37 Сообщение

Нее. Тут скорее всего дело в том, что нет указанной высоты блока по которому он бегает. В предыдущей версии портал был сделан через таблицу, а здесь на обычных дивах, скорее всего причина не работы именно в этом. :scratch:
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 27 янв 2016, 18:39 Сообщение

CabinetAdmin писал(а): В предыдущей версии портал был сделан через таблицу, а здесь на обычных дивах, скорее всего причина не работы именно в этом.
Простого решения этой проблемы как я понимаю нету ?
  • 0

CabinetAdmin 27 янв 2016, 19:58 Сообщение

Я ещё не смотрел. Возможно не через этот скрипт, так через другой же можно:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 28 янв 2016, 19:20 Сообщение

Сегодня ночью перепробовал кучу вариантов взятых с сети, не один не заработал. Печалька.
  • 0

romaamor 29 янв 2016, 18:08 Сообщение

CabinetAdmin, апну тему. Может у Вас будет время и Вы уделите внимание к моей ничтожной проблеме ? :milo:
  • 0

CabinetAdmin 30 янв 2016, 08:23 Сообщение

Например.
В стилевом файле найти:

Код: Выделить всё

/**
* Replacement for table layout
*/
#portal-left, #portal-right {
	position: relative;
	float: left;
}

.rtl #portal-left, .rtl #portal-right {
	float: right;
}

#portal-center-wrapper {
	width: 100%;
	float: left;
	display: block;
}

.rtl #portal-center-wrapper {
	float: right;
}

#portal-column-area {
	width: 100%;
	margin: 0 auto;
}

#portal-left {
	margin-left: -100%;
}

.rtl #portal-left {
	margin-right: -100%;
	margin-left: 0;
}


/*
* top spacing between portal body table and headerbar spacing is usually 10px
*/
#portal-body {
	padding-top: 10px;
	width: 100%;
}
и заменить на:

Код: Выделить всё

/**
* Replacement for table layout
*/
#portal-left, #portal-right {
	display: table-cell;
	position: relative;
	vertical-align: top;
}

.rtl #portal-left, .rtl #portal-right {
	float: right;
}

#portal-center-wrapper {
	display: table-cell;
}

#portal-column-area {
	width: 100%;
	margin: 0 auto;
}

/*
* top spacing between portal body table and headerbar spacing is usually 10px
*/
#portal-body {
	display: table;
	padding-top: 10px;
	width: 100%;
}
В файле portal_body найти:

Код: Выделить всё

<div id="portal-center" style="margin: 0 <!-- IF S_RIGHT_COLUMN -->{S_PORTAL_RIGHT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF --> 0 <!-- IF S_LEFT_COLUMN -->{S_PORTAL_LEFT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF -->; padding: 0 {$BLOCK_DISTANCE};">
и заменить на:

Код: Выделить всё

<div id="portal-center" style="padding: 0 {$BLOCK_DISTANCE};">
Потом найти левую колонку:

Код: Выделить всё

<!-- [+] left module area -->

...

<!-- [-] left module area -->
и переместить её выше, перед центральной:

Код: Выделить всё

<!-- [+] center module area -->
Дальше прикручивание этого мода.
Я не проверял, но вроде ничего не забыл, должно работать.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 30 янв 2016, 11:36 Сообщение

CabinetAdmin писал(а): Я не проверял, но вроде ничего не забыл, должно работать.
Отрезвею, перестанет голова трещать - проверю. Но в любом случаи - спасибо :drink:
  • 0

romaamor 03 фев 2016, 01:53 Сообщение

CabinetAdmin писал(а): Я не проверял, но вроде ничего не забыл, должно работать.
Не работает как должно. Боковая колонка уходит ниже самого форума.
  • 0