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

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

Реализовать такую задумку очень просто с помощью небольшого скрипта на 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 03 фев 2016, 17:08 Сообщение

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

romaamor 03 фев 2016, 18:14 Сообщение

Поставил. Можно просмотреть.
  • 0

CabinetAdmin 03 фев 2016, 18:34 Сообщение

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

romaamor 03 фев 2016, 18:37 Сообщение

В смысле надо ещё ставить скрипт с первой страницы ?
  • 0

CabinetAdmin 03 фев 2016, 18:43 Сообщение

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

romaamor 03 фев 2016, 18:49 Сообщение

CabinetAdmin писал(а): Дык, а как оно работать то будет?
Поставил. Без изминений.
  • 0

CabinetAdmin 03 фев 2016, 20:34 Сообщение

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

romaamor 03 фев 2016, 23:31 Сообщение

CabinetAdmin писал(а): Сейчас я не вижу следов мода
Удалил. Так как он ломает форум. Ставил на тестовом - тоже самое. И кстати, при установке этой функции, на главной страницы, боковая колонка как положенно с лева но ниже центрального блока со списком форумов, а при просмотре под форумов и тем - справа, но пустое место слева под колонку остаётся. И кстати, мы говорим о моде или о расширении ?
  • 0

CabinetAdmin 04 фев 2016, 15:31 Сообщение

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

romaamor 04 фев 2016, 16:20 Сообщение

CabinetAdmin писал(а): блок должен скользить на странице портала или на странице списка форумов?
На данный момент в настройках портала есть встроенная функция отображения боковых колонок на всех страницах форума. Чем я и воспользовался включив для отображения левую колонку. То есть нужен плавующий блок на всех страницах форума. На странице самого портала не столь важно. Он всё равно будет закрыт от просмотра.
Изображение
  • 0

CabinetAdmin 04 фев 2016, 16:31 Сообщение

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

CabinetAdmin 04 фев 2016, 19:03 Сообщение

Такс...

Правки для страницы портала находятся здесь - http://cabinetadmina.ru/viewtopic.php?p=70842#p70842.

Теперь правки для всех остальных страниц, на которых отображается только одна колонка.
Все правки производим в папке расширения.
Открываем файл overall_footer_page_body_after.html, находим и удаляем:

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

    <!-- [+] left module area -->
    <!-- IF S_LEFT_COLUMN -->
    <div id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px;">
     <!-- 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>
    <!-- ENDIF -->
    <!-- [-] left module area -->
Открываем overall_header_page_body_before.html и меняем всё содержимое на:

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

<!-- IF S_PORTAL_ALL === true -->
<div id="portal-page-body">
<!-- INCLUDE portal/_block_config.html -->
<div id="portal-body">
	<!-- [+] left module area -->
	<!-- IF S_LEFT_COLUMN -->
	<div id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px;">
		<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 -->
<div class="portal-body-wrapper">
	<div class="portal-body-center" style="padding: 0 {$BLOCK_DISTANCE};">
<!-- ENDIF -->
Открываем стилевой файл portal_all.css и меняем всё содержимое на:

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

.portal-body-wrapper {
	display: table-cell;
}

#portal-page-body {
	clear: both;
	margin: 4px 0;
}

ul.topiclist dt .list-inner {
	margin-right: 440px;
}

ul.topiclist dt {
	margin-right: -440px;
}

.rtl ul.topiclist dt .list-inner {
	margin-left: 440px;
}

.rtl ul.topiclist dt {
	margin-left: -440px;
}
Далее скрипт. Правки можно и не вносить в футер, можно воспользоваться возможностями расширения. Создаём в папке event ещё один файл overall_footer_after.html со следующим содержимым:

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

<!-- IF S_PORTAL_ALL === true -->
<!-- INCLUDEJS @board3_portal/portal/assets/stickyScroll.js -->
<script type="text/javascript">
	jQuery(function() {
		jQuery('#scroll').stickyScroll();
	});	
</script>
<!-- ENDIF -->
Файл stickyScroll.js закидываете в папку assets.

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

romaamor 04 фев 2016, 19:29 Сообщение

Работает. :Yahoo!:
Где в скрипе устанавливается значение для изминения остановки от верхнего и нижнего края браузера ?
  • 0

CabinetAdmin 05 фев 2016, 15:22 Сообщение

В скрипте нет такого. Блок бегает по всей высоте своего родительского блока. Можно просто задать отступы для блока, например:

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

#scroll {
	margin: 5px 0;
}
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 05 фев 2016, 16:57 Сообщение

А как отригулировать остановку от подвала ? Слишком высоко останавливается.
  • 0