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

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

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

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

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

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

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

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

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

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

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

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

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

Если возникают проблемы с установкой или что-то не так работает, можете посмотреть примеры с минимальными стилями и соотв. их код: Пример с 2-мя колонками и Пример с 4-мя колонками

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

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

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

  • additionalMarginTop

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

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

  • additionalMarginBottom

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

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

  • updateSidebarHeight

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

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

  • minWidth

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

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

  • disableOnResponsiveLayouts

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

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

  • defaultPosition

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

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

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

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

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

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

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

  • Денис:

    Может кому-нибудь пригодится и будет полезно 🙂 Сверху сразу над сайдбаром расположил меню. Некоторые ссылки (2 последние справа от экрана, равномерно растянутые Flexbox => align-items: center + justify-content: space-evenly) вели себя весьма странно: только в некоторых местах ссылок можно было увидеть их активированными — в основном были недоступны. Проблема решилась указанием пиксел (px) в скрипте. Пример: additionalMarginTop: 30 заменить на additionalMarginTop: 30px Остальные величины (проценты и прочие) не проверял за ненадобностью лично мне. Удачи!

    Ответить
    • Денис:

      Ошибка — прошу прощения, проглядел: перестал работать скрипт, (при внесении px) — не прокручивается сайдбар.

      Ответить
  • Денис:

    Прошу прощения, но не работает. Конкретно: сделал структуру согласно HTML статьи сайта, подключил все JS и т.д. — не заработало. Стал смотреть код страницы с примерами и выяснилось, что без подключения стороннего CSS (о котором ни слова в статье) работать не будет. А когда стал смотреть этот CSS, понял, что проще это всё найти в другом месте: CSS весьма загрязнён (т.е. уже "заточен" под личные нужды) и время, потраченное на его "разбор кода", удаление ненужного, правку и чистку, того не стоит. Было бы правильнее выложить в статье абсолютно чистый код: HTML и CSS, чтобы люди напрасно время не тратили. Примеры из "Скачать плагин" работают, но и там есть некоторые нюансы и "недостатки" (назовём это так), вылезающие, когда начинаешь верстать нечто иное на их базе.

    Ответить
    • Alexander:

      У плагина нет стилей, нужно просто колонки расставить под него правильно (но они в каждом случае уникальные и имеют свои стили).
      А то что в примере стили, это стили оформления, а не плагина.
      Вот Пример без стилей вообще (2 штуки только, для колонок)

      Ответить
      • Денис:

        Quote: "2 штуки только, для колонок" — не понял, что имеется ввиду — в примере вижу 4 колонки. Код пока не смотрел. Спасибо!

        Сможете выложить ещё один пример, но конкретно под 2 колонки и с чистым CSS (отступы текста, изображений как в Ваших демо на странице "Демо"), а также адаптация под просмотр на мобильных? Самому придётся долго разбираться — там имеются взаимосвязи. Заранее благодарю 🙂

        Ответить
        • Alexander:

          Как то так: Пример (стили в коде страницы посмотрите).
          Только у вас они свои же, сетки (бутстрап или еще что то) и т.д.
          Вы лучше пришлите страницу или архивом, или на codepen, или ссылку. Посмотрю что именно не работает у вас.

          Ответить
          • Денис:

            Благодарю!

            Те стили, которые вижу, вполне подойдут (пока не проверял). Если будут "заморочки", задам ещё вопрос. Спасибо!

            Ответить
          • Денис:

            P.S.: Спасибо! Всё получилось (смайлик).

            Ответить
  • Егор:

    Если в колонке два вложенных дива, например вверху есть неподвижный блок, то плагин отказывается работать.

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

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

    Ответить
    • Alexander:

      Лучше конечно ссылку дать.
      С позициями какие-то конфликты. У вас же еще используется бутстрап сетка или еще что то.
      У меня он подключен прямо к колам, примерно так:

        <div class="col-md-4 sidebar">
          <div class="theiaStickySidebar">
          Боковая колонка
          </div>
        </div>
      Ответить
      • Александр:

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

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

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

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

    Здравствуйте. Пытаюсь поставить, но не выходит, сможете помочь в установке?

    пример урла где не получается: https://dvlgroup.ru/saint-petersburg/rabochie-udostovereniya/aglomeratchik
    Ответить
    • Борис:

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

      Ответить