Содержание
- Как работает position: sticky;
- Задача
- Решение
- Два состояния
- Исходное состояние
- Состояние при прокрутке страницы
- Переключение состояний
- 5 последних уроков рубрики «CSS»
- Забавные эффекты для букв
- Реализация забавных подсказок
- Анимированные буквы
- Солнцезащитные очки от первого лица
- Раскрывающаяся навигация
Как работает position: sticky;
Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top , right , bottom , left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding , margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .
После того, как свойство position примет значение sticky , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.
Задача
Задать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.
Решение
«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed . При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left , right , top и bottom , которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).
Пример 1. Использование position
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.
Наверняка вы не раз видели, что при прокрутке страницы, некоторые её элементы остаются фиксированными. К примеру, при скролле главной страницы Google строка поиска приклеивается к верхней части экрана. Давайте обсудим реализацию этого модного эффекта.
Данный эффект является отличным приёмом для улучшения юзабилити. Следующее изображение в общих чертах охарактеризует то, что мы хотим реализовать:
Два состояния
Как и для реализации многих других фишек, нам не понадобится множество средств. Нам нужно обдумать как будет выглядеть элемент, который мы будем фиксировать в двух состояниях:
- Панель поиска в обычном состоянии;
- Панель поиска, прикреплённая к верху страницы.
Для переключения состояния мы будем менять только класс элемента. Нет, нет, никаких двух копий форм.
Исходное состояние
С помощью SCSS (диалект SASS) очень удобно реализовать ряд состояний, в котором должен прибывать тот или иной элемент.
Состояние при прокрутке страницы
Присвоим класс “fix-search” для родительского элемента.
Переключение состояний
Переключать состояние поисковой панели нужно при наступлении определённых событий: прокрутке страницы вниз. Для упрощения JavaScript кода, воспользуемся jQuery:
Если страница была прокручена вниз на 147 и более пикселей, то мы присваиваем класс поисковой панели. Если вы движетесь вверх, класс исчезает (потому что эта функция вызывается при прокрутке страницы).
Интерактивный пример можете найти на CodePen
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://css-tricks.com/scroll-fix-content/
Перевел: Станислав Протасевич
Урок создан: 28 Октября 2014
Просмотров: 81625
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Источник: