Плавающий или фиксированный блок при прокрутке.
Смысл. Сайт имеет правую колонку, основное поле (левая колонка) имеет много разделов с очень долгой прокруткой до самого низа. И есть смысл зафиксировать правую колонку или блок, особенно если там содержится полезная информация.
Реализовать такую задумку очень просто с помощью небольшого скрипта на 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
Странно. В хедере прописанно -
А при просмотре кода страницы скрипт отсутствует. К чему бы это ?
Сейчас прописал в самом хедере, всё равно не работает.
И стиль надо выбрать просильвер.
Код: Выделить всё
<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>
Сейчас прописал в самом хедере, всё равно не работает.
И стиль надо выбрать просильвер.
Пытаюсь сделать для блоков портала 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 -->
Практически, с разницей, что скрипты надо подключать не в хедере, а в футере, например перед
<!-- EVENT overall_footer_after -->
. Можно воспользоваться всё тем же расширением для добавления содержимого вниз страницы, оно вроде как раз в это место добавляет содержимое.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
А не может быть что конфликт с твоим переделанным расширением фиксированное меню в верху страницы ? Там тот скрипт не мешает ?
http://cabinetadmina.ru/viewtopic.php?f ... 8&start=15
Нее. Тут скорее всего дело в том, что нет указанной высоты блока по которому он бегает. В предыдущей версии портал был сделан через таблицу, а здесь на обычных дивах, скорее всего причина не работы именно в этом.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Например.
В стилевом файле найти:
и заменить на:
В файле portal_body найти:
и заменить на:
Потом найти левую колонку:
и переместить её выше, перед центральной:
Дальше прикручивание этого мода.
Я не проверял, но вроде ничего не забыл, должно работать.
В стилевом файле найти:
Код: Выделить всё
/**
* 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%;
}
Код: Выделить всё
<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 -->
Я не проверял, но вроде ничего не забыл, должно работать.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!