Telegram-бот для фронтендеров
База плагинов jQuery

Множество различных jQuery примеров, элементы CSS
и большое количество других инструментов для Вашего сайта!

> > Липкие блоки на CSS
-->

21-02-2015

Статьи

Липкие блоки на CSS

Липкие блоки на CSS

Все мы когда-то использовали фиксирование позиционирование элементов на странице. И тут же мы сталкивались с тем, что фиксированные блоки просто напросто перекрывали другие элементы, в зависимости от параметров z-index. И вот совсем недавно появилось решение данной заминки - position: sticky. Теперь более подробно.
 
Когда на странице имеется пустое пространство, при скролле блок с position: sticky двигается свободно, не наезжая на другие элементы, но когда таковое случается, то наш блок реагирует на соседние элементы, не позволяя накрыть их, либо спрятаться за ними.
 
Впрочем, давайте лучше посмотрим на примеры CSS. Стоит отметить, что результат будет виден только пользователям последних версий Mozilla и Safari. Для остальных же, можно использовать любое другое позиционирование:

пример display sticy

В таком случае, для поддерживающих браузеров будет браться sticky, а для всех остальных - static.

Актуально все это для мобильных версий сайта, когда c помощью каскадных таблиц стилей элемент необходимо зафиксировать, но в то же время, чтобы он не перекрывал другие важные объекты.

jquery scrolling

Читайте так же:

Здесь нет еще ни одного комментария...

Оставить комментарий

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Скачать
v.1.4.1 или v.3.0.0

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Популярное за неделю:

Шаблоны:

Подборки интерфейсов:

^