Плавающий или фиксированный блок при прокрутке.
Смысл. Сайт имеет правую колонку, основное поле (левая колонка) имеет много разделов с очень долгой прокруткой до самого низа. И есть смысл зафиксировать правую колонку или блок, особенно если там содержится полезная информация.
Реализовать такую задумку очень просто с помощью небольшого скрипта на 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
Не получается так заскролить сразу обе боковые колонки. Получается или правая или левая. Как то можно что бы они обе останавливались ?
P.S
Абалдеть. Что то с FTP прогой случилось и она начала с дуру удалять шаблоны с сервера. Я давно так не пугался. Благо был архив бекапа двух дневной давности почти всё восстановил.
P.S
Абалдеть. Что то с FTP прогой случилось и она начала с дуру удалять шаблоны с сервера. Я давно так не пугался. Благо был архив бекапа двух дневной давности почти всё восстановил.
Второй колонке дать другое имя, например:
И добавить это имя в скрипт (через запятую):
Код: Выделить всё
<div id="scroll2">
Код: Выделить всё
<script type="text/javascript">
jQuery(function() {
jQuery('#scroll, #scroll2').stickyScroll();
});
</script>
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Всё работает отлично. Спасибо. Но теперь такой вопрос. А как можно сделать что бы эти боковые колонки были привязаны к нижней границе окошка браузера ? К примеру. Если прокручиваеш страницу то боковая колонка портала остонавливается у низа страницы когда появляется последний блок. Всё то же что и в Вашем примере выше но как бы зеркальное отображение.
Ну смотри, боковые колонки портала длинные, уходят в низ за границы страницы. Идея такая, прокручиваем страницу в низ, и в тот момент когда последний блок боковушки подымаясь появляется в зоне видимости вся колонка должна остоновится а середина форума прокручиваются дальше. В дополнение к тому что у меня сейчас. Можно так ?
Суда по коду с того сайта где я это видел то это -CabinetAdmin » 6 минут назад писал(а):Тут немного другой принцип
<div class="theiaStickySidebar"
Я не понял. Если это оттуда где твоя задумка уже реализована, то я не в курсе.romaamor » 7 минут назад писал(а):Суда по коду с того сайта где я это видел то это -
<div class="theiaStickySidebar"
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Подумал может тебе известно что это за класс такой Sticky Sidebar. Нашёл такое только для WordPress.CabinetAdmin » менее минуты назад писал(а):Я не понял. Если это оттуда где твоя задумка уже реализована, то я не в курсе.
Попробовал сегодня таким же способом тормознуть блок меню в шапке -
Само меню это отдельный шаблон, в хедере выводится через -
Ставил по аналогии -
Работает. Но при прокрутке страницы в низ он как будто во что то упирается и уходит в верх. Пробовал отключать разные блоки, не помогло. Как то можно исправить ?
Само меню это отдельный шаблон, в хедере выводится через -
Код: Выделить всё
<!-- INCLUDE menu_system.html -->
Ставил по аналогии -
Код: Выделить всё
<div id="scroll">
<!-- INCLUDE menu_system.html -->
</div>
Последний раз редактировалось romaamor 30 сен 2014, 15:00, всего редактировалось 1 раз.
CabinetAdmin, как бы работает. Своё предыдущее сообщение отредактировал.CabinetAdmin » 6 минут назад писал(а):Не подходит.