Плавающий или фиксированный блок при прокрутке.
Смысл. Сайт имеет правую колонку, основное поле (левая колонка) имеет много разделов с очень долгой прокруткой до самого низа. И есть смысл зафиксировать правую колонку или блок, особенно если там содержится полезная информация.
Реализовать такую задумку очень просто с помощью небольшого скрипта на jQuery.
Скачиваете скрипт. Добавляете его в секцию
Не забудьте о наличии библиотеки jQuery и пути до файла.
(Скрипт заменён - 17.03.2015 // CabinetAdmin)
По умолчанию в скрипте выставлено "плавание" блока при прокрутке. Её можно отключить, чтобы блок фиксировался на месте.
В начале файла находите:
меняете значение на 0, или на любое другое в зависимости от ваших потребностей. Чем выше число, тем медленнее блок движется при прокрутке.
Пример применения мода на правой колонке портала.
Открываете шаблон
добавляете:
и перед:
добавляете:
Т.е. оборачиваете нужный вам блок в:
Вот собственно и всё.
Пример можно посмотреть здесь:
Смысл. Сайт имеет правую колонку, основное поле (левая колонка) имеет много разделов с очень долгой прокруткой до самого низа. И есть смысл зафиксировать правую колонку или блок, особенно если там содержится полезная информация.
Реализовать такую задумку очень просто с помощью небольшого скрипта на jQuery.
Скачиваете скрипт. Добавляете его в секцию
<head>
шаблона overall_header.html
:
Код: Выделить всё
<script type="text/javascript" src=".../stickyScroll.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('#scroll').stickyScroll();
});
</script>
По умолчанию в скрипте выставлено "плавание" блока при прокрутке. Её можно отключить, чтобы блок фиксировался на месте.
В начале файла находите:
Код: Выделить всё
duration: 300,
Пример применения мода на правой колонке портала.
Открываете шаблон
/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>
Код: Выделить всё
<div id="scroll">
<!-- фиксированный блок -->
</div>
Пример можно посмотреть здесь:
Комментарии: 76