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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • additionalMarginTop

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

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

  • additionalMarginBottom

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

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

  • updateSidebarHeight

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

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

  • MinWidth

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

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

  • disableOnResponsiveLayouts

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

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

  • defaultPosition

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

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

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

Смотрите также:

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

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

Комментарии:

  • Александр:

    Супер решение, спасибо! Но при прокрутке возникает баг при срабатывании прилипания — сайд бар смещается влево, потом снова возвращается. Вот фото: http://prntscr.com/o1cakm

    Ответить
    • Alexander:

      Лучше конечно ссылку дать.
      С позициями какие-то конфликты. У вас же еще используется бутстрап сетка или еще что то.
      У меня он подключен прямо к колам, примерно так:
      <div class="col-md-4 sidebar">
      <div class="theiaStickySidebar">
      Боковая колонка
      </div>
      </div>

      Ответить
      • Александр:

        Понял, спасибо!

        Ответить
  • Семен:

    Дружище, респект тебе большой за этот плагин! Супер!

    Ответить
  • Борис:

    Здравствуйте. Пытаюсь поставить, но не выходит, сможете помочь в установке? пример урла где не получается: https://dvlgroup.ru/saint-petersburg/rabochie-udostovereniya/aglomeratchik

    Ответить
    • Борис:

      Все, разобрался, неактуально.

      Ответить