Примеры:
Установка:
Подключаем библиотеку jQuery и плагин Theia Sticky Sidebar:
- Скачать: theia-sticky-sidebar.js
- Скачать: theia-sticky-sidebar.min.js
Данный плагин использует библиотеку ResizeSensor для определения, когда сайдбар изменяет свою высоту, например, при использовании аккордеона
- Скачать: ResizeSensor.js
- Скачать: ResizeSensor.min.js
Если не использовать ResizeSensor, то плагин Theia Sticky Sidebar будет функционировать возможно даже плавнее, но не сможет определить изменение высоты ваших блоков в колонке.
Использование:
HTML структура сайта:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="wrapper"> <div class="content"> <div class="theiaStickySidebar"> Контент </div> </div> <div class="sidebar"> <div class="theiaStickySidebar"> Боковая колонка </div> </div> </div> |
div'ы с классом theiaStickySidebar являются необязательными, но настоятельно рекомендуются. Если вы их не создадите, скрипт создаст их сам, но при этом могут возникнуть проблемы при использовании рекламы или фреймов.
А также используйте <! DOCTYPE html> на своей странице, иначе можно столкнуться со странными проблемами.
И добавляем скрипт:
|
1 2 3 4 5 6 |
jQuery(document).ready(function() { jQuery('.content, .sidebar').theiaStickySidebar({ // Настройки additionalMarginTop: 30 }); }); |
Если возникают проблемы с установкой или что-то не так работает, можете посмотреть примеры с минимальными стилями и соотв. их код: Пример с 2-мя колонками и Пример с 4-мя колонками
Настройки:
-
containerSelector
Контейнер боковой панели.
Если не указан, то используется родительский элемент.
-
additionalMarginTop
Отступ сверху, когда сайдбар зафиксирован вверху
По умолчанию: 0
-
additionalMarginBottom
Отступ снизу, когда сайдбар зафиксирован внизу
По умолчанию: 0
-
updateSidebarHeight
Обновляет высоту боковой панели
По умолчанию: true
-
minWidth
Отключение фиксирования сайдбара если ширина экрана меньше указанной. Необходимо для адаптивных сайтов.
По умолчанию: 0
-
disableOnResponsiveLayouts
Пытается автоматически определить малые экраны и отключить фиксацию если панели будут находиться друг на друге
По умолчанию: true
-
defaultPosition
Боковая панель должна иметь нестатичное положение, т.к. при фиксировании использует абсолютное.
По умолчанию: relative
Может кому-нибудь пригодится и будет полезно 🙂 Сверху сразу над сайдбаром расположил меню. Некоторые ссылки (2 последние справа от экрана, равномерно растянутые Flexbox => align-items: center + justify-content: space-evenly) вели себя весьма странно: только в некоторых местах ссылок можно было увидеть их активированными - в основном были недоступны. Проблема решилась указанием пиксел (px) в скрипте. Пример: additionalMarginTop: 30 заменить на additionalMarginTop: 30px Остальные величины (проценты и прочие) не проверял за ненадобностью лично мне. Удачи!
Ошибка - прошу прощения, проглядел: перестал работать скрипт, (при внесении px) - не прокручивается сайдбар.
Прошу прощения, но не работает. Конкретно: сделал структуру согласно HTML статьи сайта, подключил все JS и т.д. - не заработало. Стал смотреть код страницы с примерами и выяснилось, что без подключения стороннего CSS (о котором ни слова в статье) работать не будет. А когда стал смотреть этот CSS, понял, что проще это всё найти в другом месте: CSS весьма загрязнён (т.е. уже "заточен" под личные нужды) и время, потраченное на его "разбор кода", удаление ненужного, правку и чистку, того не стоит. Было бы правильнее выложить в статье абсолютно чистый код: HTML и CSS, чтобы люди напрасно время не тратили. Примеры из "Скачать плагин" работают, но и там есть некоторые нюансы и "недостатки" (назовём это так), вылезающие, когда начинаешь верстать нечто иное на их базе.
У плагина нет стилей, нужно просто колонки расставить под него правильно (но они в каждом случае уникальные и имеют свои стили).
А то что в примере стили, это стили оформления, а не плагина.
Вот Пример без стилей вообще (2 штуки только, для колонок)
Quote: "2 штуки только, для колонок" - не понял, что имеется ввиду - в примере вижу 4 колонки. Код пока не смотрел. Спасибо!
Сможете выложить ещё один пример, но конкретно под 2 колонки и с чистым CSS (отступы текста, изображений как в Ваших демо на странице "Демо"), а также адаптация под просмотр на мобильных? Самому придётся долго разбираться - там имеются взаимосвязи. Заранее благодарю 🙂
Как то так: Пример (стили в коде страницы посмотрите).
Только у вас они свои же, сетки (бутстрап или еще что то) и т.д.
Вы лучше пришлите страницу или архивом, или на codepen, или ссылку. Посмотрю что именно не работает у вас.
Благодарю!
Те стили, которые вижу, вполне подойдут (пока не проверял). Если будут "заморочки", задам ещё вопрос. Спасибо!
P.S.: Спасибо! Всё получилось (смайлик).
Если в колонке два вложенных дива, например вверху есть неподвижный блок, то плагин отказывается работать.
Супер решение, спасибо! Но при прокрутке возникает баг при срабатывании прилипания - сайд бар смещается влево, потом снова возвращается. Вот фото: http://prntscr.com/o1cakm
Лучше конечно ссылку дать.
С позициями какие-то конфликты. У вас же еще используется бутстрап сетка или еще что то.
У меня он подключен прямо к колам, примерно так:
<div class="col-md-4 sidebar"> <div class="theiaStickySidebar"> Боковая колонка </div> </div>Понял, спасибо!
Дружище, респект тебе большой за этот плагин! Супер!
Здравствуйте. Пытаюсь поставить, но не выходит, сможете помочь в установке?
Все, разобрался, неактуально.