На сайтах с многим количеством информации, то ли текстовой то ли мультимедийной, блоки навигации остаются вверху сайта, и часто приходится перематывать страницу обратно вверх, по этому в данном уроке мы будем рассматривать  несколько способов создания плавающего блока для сайта, или как их еще называть,- сайдбара. Суть в том, что при скролле вниз наши плавающие блоки с необходимой информацией будут скользить вниз. Достаточно удобная и практичная вещь, если Вы желаете упростить навигацию на своем сайта..

 

В данном уроке мы рассмотрим два способа их создания, первый с помощью CSS,и второй с библиотекой jQuery, вот так все выглядит, в демо присутствую оба образца:

1. CSS. Рассмотрим первый и пожалуй самый простой способ это использование фиксированного позиционирования. Наш сайдбар находится внутри слоя  #page-wrap с относительным позиционированием, поэтому сайдбар прекрасно разместится — нам только необходимо сдвинуть его влево с помощью свойства margin. Благодаря этому наш блок всегда будет оставаться на одном и том же месте станицы:

2. Второй не менее интересный способ, это использование библиотеки jQuery, плюс данного блока в том, что он будет плавно скользить со скроллом страницы, если расстояние больше чем стартовая верхняя позиция сайдбара, мы можем изменить top margin сайдбара и опустить его в видимую часть монитора.

Данный метод не является сложным, но больше припадает к глазу пользователя именно этот эффект. Так же плюсом данных блоков является то, что они поддерживаются всеми браузерами. На этом урок завершен.

На главную