ProfiPHPProfiPHP
Категория: jQuery

Плагин Sticky-Kit

Плагин Sticky-Kit обеспечивает простой способ прикрепления элементов, которые всегда отображаются при прокручивании пользователем содержимого страницы.

Источник можно найти на GitHub.

Страница плагина - Sticky-kit

После скачивания файлов плагина Sticky-kit его необходимо подключить:
<script src="/js/jquery.sticky-kit.min.js"></script>
Можно подключить и полную версию без приставки .min, которая позволит в читабельном виде просматривать и редактировать исходный код.

Обязательно перед использованием необходимо подключить библиотеку jQuery.

Для использования плагина Sticky-kit необходимо вызвать stick_in_parent с элементами, которые вы хотите навсегда оставить внутри своего родителя.
$("#sidebar").stick_in_parent();
Также можно указать много липких столбцов. Для этого вызовите stick_in_parent для всех элементов сразу:
$("#sidebar, #main_column").stick_in_parent();
Если вы не уверены, что выше: боковая панель или ваш основной контент? Неважно, просто вызовите функцию stick_in_parent для всех столбцов. Sticky-kit будет прикреплять только предметы, если они не занимают всю высоту своего родителя.

Также можно вызывать Sticky-kit с дополнительными опциями:
$("#sticky_item").stick_in_parent(options);
Рабочий пример:
var sidebarHeight = $('#layout_sidebar').outerHeight();
var contentHeight = $('#layout_content').outerHeight();
var $layout = $('#layout_sidebar .sidebar, #layout_content .content_wrap');
$layout.stick_in_parent({
parent: '#page',
spacer: sidebarHeight > contentHeight ? '#layout_content' : '#layout_sidebar'
});
Соответственно код HTML:
<div id="page">
<div id="layout_sidebar">
<div class="sidebar is_stuck">
Закрепленное левое меню
</div>
</div>
<div id="layout_content">
<div class="content_wrap">
Содержание страницы
</div>
</div>
</div>
StickyKit очень хороший инструмент для работы с прокруткой. Одной из причин задержки прокрутки являются обработчики onscroll которые выполняют слишком много работы, запускают переполнения страниц и другие процессы. StickyKit избегает этого, имея очень легкий обработчик прокрутки, который работает с кешированными значениями.

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

Имя:
Текст комментария: