Theia Sticky Sidebar — прилипание блоков при скроллировании страницы
Плагин позволяет приклеить любые блоки страницы при её прокручивании, делая их постоянно видимыми. Это полезно когда другие блоки значительно выше чем прикрепляемый блок. Закреплять полезно например такие блоки, как вертикальное меню, рекламный блок, блок с поиском, короткие формы и т.п.
В демо есть примеры использования плагина в сетках популярных фреймворков bootstrap и foundation.
HTML
Пример html структуры:
<div class="wrapper">
<div class="content">
<div class="theiaStickySidebar">
...
</div>
</div>
<div class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</div>
</div>Контейнер с классом theiaStickySidebar опционален, но очень рекомендуется его использовать. Скрипт создает его сам, но если вы будете использовать рекламные блоки или iframe, то могут возникнуть проблемы.
JS
Вставка скриптов на страницу:
<script type="text/jаvascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/jаvascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/jаvascript" src="dist/theia-sticky-sidebar.min.js"></script>
<script type="text/jаvascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>Плагин использует дополнительную библиотеку ResizeSensor - CSS Element Queries для определения моментов изменения высоты боковых панелей, чтобы он смог пересчитать позиции панелей. Например такое может потребоваться, если у вас используетя аккордеон на странице.
Можно и не использовать ResizeSensor, плагин будет работать, но не будет автоматически определять изменение высоты.
Настройки
containerSelector
Внешний контейнер для сайдбара. Если не указан, то используется родитель
additionalMarginTop
Дополнительный отступ сверху в px. По умолчанию 0
additionalMarginBottom
Дополнительный отступ снизу в px. По умолчанию 0
updateSidebarHeight
Обновляет высоту боковой панели. Применяйте параметр, если фон не отображается как надо. По умолчанию true
minWidth
Боковая панели возвращается в нормальное состояние, если её ширина становится меньше указанной. Полезно для адаптивного дизайна. По умолчанию 0
defaultPosition
Боковая панель должна иметь не статическое положение, так как внутренняя липкая боковая панель использует абсолютное позиционирование. По умолчанию relative.
namespace
События привязываются с использованием namespace, таким образом вы можете отвязать их позже не затрагивая другие. По умолчанию TSS (Theia Sticky Sidebar)
Установка
npm install theia-sticky-sidebar --save
yarn add theia-sticky-sidebar
bower install theia-sticky-sidebar --save
