Ездящий блок jQuery

категория: jQuery
Ездящие фиксированные блоки на сайте при прокрутке страницы - это очень круто, особенно фиксированное меню сверху. Очень удобно, когда не нужно вечно возвращаться наверх за навигацией. С меню проблем нет, просто делается блок position:fixed c z-index побольше, чтобы был сверху всех элементов сайта. А вот, чтобы блок ездил в пределах сайдбара, с верхними и нижними границами, в которые он будет упираться и фиксироваться, - это уже двумя строчками не напишешь. Пример можете посмотреть на pixity.ru, кликните на любой пост и поскрольте вниз, будет ездить блок подписки на социальные сети. В реализации мне помог плагин scrolltofixed и думаю, в дальнейшем буду его активно использовать. Первым делом стаскиваем jquery-scrolltofixed-min.js и подключаем. Возьмем наш блок с подпиской и обвернем:
<div class="block-wrap-subscribe">
    // Подписка
</div>
Теперь пишем скрипт, который будет выполнять поставленную задачу, все комментарии распишу уже в коде:
// загоняем наш блок в переменную
var element = $('.block-wrap-subscribe'),
    // упираться снизу будет в блок #block-post-like,
    // отнимаем высоту блока и 35px для отступа,
    // чтоб блок не залазил за нижнюю рамку
    limitPosition = $('#block-post-like').offset().top - element.height() - 35
// включаем scrollToFixed только тогда, когда статья больше сайдбара
// и есть свободное место для прокрутки
if ($('.view-post').height() > $('.right-sidebar').height()) {
    element.scrollToFixed({
	// отступ сверху 
        marginTop: 60,
        // лимит снизу
        limit: limitPosition
    });
}
Можно этот плагин использовать и для фиксирования меню или футера, либо еще чего-то. Я думаю, что это очень полезная штука.


blog comments powered by Disqus