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

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

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

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

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

Виджет

Подключение файлов css и js

от denymoz

Скачать 487 загрузок

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

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

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

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

<script>
    $(document).ready(function() {
        $('.my_sidebar').theiaStickySidebar({
              additionalMarginTop: 50,
              additionalMarginBottom: 50
        });
    });
</script>

В этом коде:

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

Всё.

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