Фиксация сайдбара при прокрутке вверх и вниз

Зафиксировать боковую колонку сайта можно двумя способами:

1 Зафиксировать весь сайдбар вверху и внизу страницы. Когда заканчивается колонка, она останавливается, а при прокрутке вверх опять листается до конца. Данный вариант рассмотрен в этой заметке.

2 Зафиксировать определенный блок сайдбара. Когда при прокрутке вниз до определенного блока, он фиксируется и постоянно остается видимым. Этот вариант рассмотрим в будущем.

Примеры:
Установка:

Подключаем библиотеку jQuery и плагин Theia Sticky Sidebar:

Данный плагин использует библиотеку CSS Element Queries для определения, когда сайдбар изменяет свою высоту, например, при использовании аккордеона

Если не использовать ResizeSensor, то плагин Theia Sticky Sidebar будет функционировать возможно даже плавнее, но не сможет определить изменение высоты ваших блоков в колонке.

Использование:

HTML структура сайта:

div'ы с классом theiaStickySidebar являются необязательными, но настоятельно рекомендуются. Если вы их не сосдадите, скрипт сосдаст их сам, но при этом могут возникнуть проблемы при использовании рекламы или фреймов.

А также используйте <! DOCTYPE html> на своей странице, иначе можно столкнуться со странными проблемами.

И добавляем скрипт:

Настройки:
  • containerSelector

    Контейнер боковой панели.

    Если не указан, то используется родительский элемент.

  • additionalMarginTop

    Отступ сверху, когда сайдбар зафиксирован вверху

    По умолчанию: 0

  • additionalMarginBottom

    Отступ снизу, когда сайдбар зафиксирован внизу

    По умолчанию: 0

  • updateSidebarHeight

    Обновляет высоту боковой панели

    По умолчанию: true

  • MinWidth

    Отключение фиксирования сайдбара если ширина экрана меньше указанной. Необходимо для адаптивных сайтов.

    По умолчанию: 0

  • disableOnResponsiveLayouts

    Пытается автоматически определить малые экраны и отключить фиксацию если панели будут находиться друг на друге

    По умолчанию: true

  • defaultPosition

    Боковая панель должна иметь нестатичное положение, т.к. при фиксировании использует абсолютное.

    По умолчанию: relative

Автор плагина и более подробная информация: WeCodePixels

Похожие записи:

Добавить комментарий:

Ваш комментарий отправлен!