Легко упускаемое из виду свойство position sticky в CSS

CSS

Зачем учить позицию: липкая

При разработке мобильных приложений мы часто сталкиваемся с такой ситуацией — когда сайт прокручивается на определенную высоту, пусть часть контента отображается в виде навбара, то есть отображается сверху, мы обычно используем js для отслеживания события прокрутки для достижения это, но новое добавленное свойство css position:sticky может быть легко реализовано

Я не последний, кто знает: позиция: липкая

Смысл позиции заключается в указании битового типа, а типы значений могут быть: статическими, относительными, абсолютными, фиксированными, наследовать и липкими, где липкие — это недавно выпущенное свойство CSS3. Сегодня я хочу поговорить о липком свойстве

позиция: липкое использование

  • position:sticky называется закрепленным элементом и представляет собой элемент, свойство position которого вычисляется как sticky .
  • Простое понимание таково: в целевой области он ведет себя как позиция: относительная; во время процесса скольжения, когда расстояние между элементом и его родительским элементом достигает требования фиксированного позиционирования (например, сверху: 100 пикселей); позиция: липкая эффект в это время эквивалентен фиксированному позиционированию, которое фиксируется в соответствующем положении.
  • Можно сказать, что это комбинация относительного позиционирования относительного и фиксированного фиксированного позиционирования.
  • Фиксированное относительное смещение элемента определяется относительно его ближайшего элемента-предка с полем прокрутки.Если ни один из элементов-предков не прокручивается, смещение элемента вычисляется относительно окна просмотра.

положение: липкое состояние использования

1. Родительский элемент не может иметь переполнение: скрыто или переполнение: Автоматические атрибуты.

2. Необходимо указать одно из значений top, bottom, left и right, иначе будет только в относительном позиционировании

3. Высота родительского элемента не может быть меньше высоты липкого элемента.

4. Липкий элемент действует только внутри своего родительского элемента.

пример

  • Когда мышь опускается на определенную высоту, срабатывает требование позиционирования position:sticky, так что «популярное, новое, рекомендуемое» фиксируется на расстоянии 44 пикселя от верхнего края.

  • css-код

.tab-control{
  position: sticky;
  top: 44px;
}
  • HTML-область
<tab-control class="tab-control" :titles="['流行','新款','精选']"></tab-control>

Обратите внимание на совместимость в веб-разработке:

sticky по-прежнему является экспериментальным свойством, а не рекомендованным стандартом W3C. Это также происходит из-за того, что прослушивание события прокрутки для реализации закрепленного макета переводит браузер в режим медленной прокрутки, что противоречит желанию браузера улучшить прокрутку за счет аппаратного ускорения. Конкретную ситуацию можно увидеть на рисунке ниже.В принципе, можно сказать, что браузерами, используемыми этим свойством, являются только FireFox и Safari для iOS.

«Яма», с которой легко столкнуться с липким

  • 1. Sticky не активирует BFC,

  • 2. Z-индекс недействителен,

  • 3. Когда высота родительского элемента составляет 100 %, атрибут sticky станет недействительным после того, как страница сдвинется на определенную высоту.

  • 4. Младшая версия IE не поддерживает использование липких

Используйте sticky в пользовательской панели навигации апплета:

sticky может действовать на терминале апплета! Протестируйте это свойство особенно применимо, когда настраиваемая навигация

Категории