Как создать плавающие блоки для сайта
На сайтах с многим количеством информации, то ли текстовой то ли мультимедийной, блоки навигации остаются вверху сайта, и часто приходится перематывать страницу обратно вверх, по этому в данном уроке мы будем рассматривать несколько способов создания плавающего блока для сайта, или как их еще называть,- сайдбара. Суть в том, что при скролле вниз наши плавающие блоки с необходимой информацией будут скользить вниз. Достаточно удобная и практичная вещь, если Вы желаете упростить навигацию на своем сайта..
В данном уроке мы рассмотрим два способа их создания, первый с помощью CSS,и второй с библиотекой jQuery, вот так все выглядит, в демо присутствую оба образца:
1. CSS. Рассмотрим первый и пожалуй самый простой способ это использование фиксированного позиционирования. Наш сайдбар находится внутри слоя #page-wrap с относительным позиционированием, поэтому сайдбар прекрасно разместится — нам только необходимо сдвинуть его влево с помощью свойства margin. Благодаря этому наш блок всегда будет оставаться на одном и том же месте станицы:
1 2 3 4 5 6 7 8 9 10 11 |
#page-wrap { width: 600px; margin: 15px auto; position: relative; } #sidebar { width: 190px; position: fixed; margin-left: 410px; } |
2. Второй не менее интересный способ, это использование библиотеки jQuery, плюс данного блока в том, что он будет плавно скользить со скроллом страницы, если расстояние больше чем стартовая верхняя позиция сайдбара, мы можем изменить top margin сайдбара и опустить его в видимую часть монитора.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function() { var offset = $("#sidebar").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#sidebar").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#sidebar").stop().animate({ marginTop: 0 }); } }); }); |
Данный метод не является сложным, но больше припадает к глазу пользователя именно этот эффект. Так же плюсом данных блоков является то, что они поддерживаются всеми браузерами. На этом урок завершен.
Читайте также:
Опубликовал Cooper 13.07.2011 в 08:33, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |