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

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

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

romaamor 09 авг 2014, 21:10 Сообщение

Не получается так заскролить сразу обе боковые колонки. Получается или правая или левая. Как то можно что бы они обе останавливались ?
P.S
Абалдеть. Что то с FTP прогой случилось и она начала с дуру удалять шаблоны с сервера. Я давно так не пугался. Благо был архив бекапа двух дневной давности почти всё восстановил. :x
  • 0

CabinetAdmin 10 авг 2014, 08:01 Сообщение

Второй колонке дать другое имя, например:

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

<div id="scroll2">
И добавить это имя в скрипт (через запятую):

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

<script type="text/javascript">
   jQuery(function() {
      jQuery('#scroll, #scroll2').stickyScroll();
   });   
</script>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 10 авг 2014, 11:41 Сообщение

Всё работает отлично. Спасибо. Но теперь такой вопрос. А как можно сделать что бы эти боковые колонки были привязаны к нижней границе окошка браузера ? К примеру. Если прокручиваеш страницу то боковая колонка портала остонавливается у низа страницы когда появляется последний блок. Всё то же что и в Вашем примере выше но как бы зеркальное отображение.
  • 0

CabinetAdmin 10 авг 2014, 20:05 Сообщение

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

romaamor 10 авг 2014, 20:22 Сообщение

Ну смотри, боковые колонки портала длинные, уходят в низ за границы страницы. Идея такая, прокручиваем страницу в низ, и в тот момент когда последний блок боковушки подымаясь появляется в зоне видимости вся колонка должна остоновится а середина форума прокручиваются дальше. В дополнение к тому что у меня сейчас. Можно так ?
  • 0

CabinetAdmin 10 авг 2014, 21:05 Сообщение

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

romaamor 10 авг 2014, 21:13 Сообщение

CabinetAdmin » 6 минут назад писал(а):Тут немного другой принцип
Суда по коду с того сайта где я это видел то это -
<div class="theiaStickySidebar"
  • 0

CabinetAdmin 10 авг 2014, 21:26 Сообщение

romaamor » 7 минут назад писал(а):Суда по коду с того сайта где я это видел то это -
<div class="theiaStickySidebar"
Я не понял. Если это оттуда где твоя задумка уже реализована, то я не в курсе.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 10 авг 2014, 21:29 Сообщение

CabinetAdmin » менее минуты назад писал(а):Я не понял. Если это оттуда где твоя задумка уже реализована, то я не в курсе.
Подумал может тебе известно что это за класс такой Sticky Sidebar. Нашёл такое только для WordPress.
  • 0

romaamor 30 сен 2014, 14:51 Сообщение

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

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

<!-- INCLUDE menu_system.html -->

Ставил по аналогии -

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

<div id="scroll">
<!-- INCLUDE menu_system.html -->
</div>
Работает. Но при прокрутке страницы в низ он как будто во что то упирается и уходит в верх. Пробовал отключать разные блоки, не помогло. Как то можно исправить ?
  • 0
Последний раз редактировалось romaamor 30 сен 2014, 15:00, всего редактировалось 1 раз.

CabinetAdmin 30 сен 2014, 14:53 Сообщение

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

romaamor 30 сен 2014, 15:02 Сообщение

CabinetAdmin » 6 минут назад писал(а):Не подходит.
CabinetAdmin, как бы работает. Своё предыдущее сообщение отредактировал.
  • 0

CabinetAdmin 30 сен 2014, 15:13 Сообщение

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

romaamor 30 сен 2014, 15:23 Сообщение

Если имеется в веду что будет работать только в шапке, то он уже опускается за пределы этого блока. Думал что тормозит из за аватара, убрал, всё равно то же самое.
  • 0