Как сделать липкий сайдбар

+13
360
Как сделать липкий сайдбар

Иногда возникает необходимость зафиксировать сайдбар при прокрутке страницы. Сделать это очень просто. Не будем химичить со стилями, будем использовать библиотеку Theia Sticky Sidebar.

Все манипуляции сводятся к нескольким простым действиям.

1. Скачиваем архив со скриптами отсюда. Внутри архива есть папка theia-sticky-sidebar-master\dist, в которой находим два файла — ResizeSensor.min.js и theia-sticky-sidebar.min.js. Загружаем эти файлы в папку js вашего шаблона.

2. Устанавливаем вот этот виджет:

Устанавливаем его на все страницы сайта где-нибудь вверху, и в нем добавляем опции:

2.1. Во вкладке JS добавляем 2 строчки:

  1. /templates/вашшаблон/js/ResizeSensor.min.js
  2. /templates/вашшаблон/js/theia-sticky-sidebar.min.js

Изображение

2.2. Во вкладке Код перед </body> вставляем такой код:

  1. <script>
  2. $(document).ready(function() {
  3. $('.my_sidebar').theiaStickySidebar({
  4. additionalMarginTop: 50,
  5. additionalMarginBottom: 50
  6. });
  7. });
  8. </script>

В этом коде:

  • .my_sidebar — селектор сайдбара
  • additionalMarginTop — отступ от верхнего края экрана во время фиксации
  • additionalMarginBottom — отступ от нижнего края экрана во время фиксации.

Всё.

Демо: nifigasse.ru/icms/24-google-indexing.html

0
Алексей Т Алексей Т 25 дней назад #

Полезно+

0
Димон Димон 24 дня назад #

спасибо

0
dChirkis dChirkis 23 дня назад #

 Лайк, подписка и колокольчик на обновления  ))

0
nikfel nikfel 21 день назад #
А как узнать селектор сайдбара?
Я так понимаю само меню фиксируется на сайте или используется какой-то компонент?
+1
Нифигаccе о-го-гошеньки Нифигаccе о-го-гошеньки 21 день назад #

Сайдбар — это боковая колонка. Селектором может быть определенный класс этой колонки (например, .sidebar), или тег (aside). Или тег с классом (div.sidebar). Можно указать нужный класс в настройках колонки:

Изображение

В этом примере в качестве селектора можно использовать .my_sidebar.

Также можно посмотреть в панели разработчика (F12) во вкладке «Элементы»:

Изображение

Здесь селектором будет aside (без точки).

Еще от автора

Поле "UpJump - поднятие записей"
Поднятие авторами своих записей в списках типов контента и групп.
Компонент "UpJump - продвижение записей в списках" стал доступнее
И снова делаю то, о чем вы просили. Теперь речь про компонент "UpJump - продвижение записей в списках" - теперь он стал доступнее.
Компонент Google Indexing дешевле!
Как вы и просили, теперь компонент стал доступнее. Но есть нюансы.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.