Плавающий или фиксированный блок при прокрутке.
Смысл. Сайт имеет правую колонку, основное поле (левая колонка) имеет много разделов с очень долгой прокруткой до самого низа. И есть смысл зафиксировать правую колонку или блок, особенно если там содержится полезная информация.
Реализовать такую задумку очень просто с помощью небольшого скрипта на 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
Удалил. Так как он ломает форум. Ставил на тестовом - тоже самое. И кстати, при установке этой функции, на главной страницы, боковая колонка как положенно с лева но ниже центрального блока со списком форумов, а при просмотре под форумов и тем - справа, но пустое место слева под колонку остаётся. И кстати, мы говорим о моде или о расширении ?
Если о плавающем блоке, то это уже считается модом или не, даже не модом, а фиксом для портала. Ну, а портал, это конечно же расширение.
Тут я немного потерялся блок должен скользить на странице портала или на странице списка форумов? Просто те правки годятся только для портала, они не затрагивают страницу форумов и тем.
Плюс, под описание, что колонка смещается вниз, подходит отсутствие новых стилей.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
На данный момент в настройках портала есть встроенная функция отображения боковых колонок на всех страницах форума. Чем я и воспользовался включив для отображения левую колонку. То есть нужен плавующий блок на всех страницах форума. На странице самого портала не столь важно. Он всё равно будет закрыт от просмотра.
Такс...
Правки для страницы портала находятся здесь - http://cabinetadmina.ru/viewtopic.php?p=70842#p70842.
Теперь правки для всех остальных страниц, на которых отображается только одна колонка.
Все правки производим в папке расширения.
Открываем файл
Открываем
Открываем стилевой файл
Далее скрипт. Правки можно и не вносить в футер, можно воспользоваться возможностями расширения. Создаём в папке event ещё один файл
Файл
Всё.
Правки для страницы портала находятся здесь - 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;
}
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
.Всё.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
В скрипте нет такого. Блок бегает по всей высоте своего родительского блока. Можно просто задать отступы для блока, например:
Код: Выделить всё
#scroll {
margin: 5px 0;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!