CSS Sticky на самом деле очень прост

анимация CSS
CSS Sticky на самом деле очень прост

зачем писать эту статью

StickyЭто не новое знание Причина написания этой статьи в том, что в процессе реализации эффекта в последнее время я обнаружил, что меня не интересуетStickyПонимание предвзятое, а результаты выполнения кода не такие, как ожидалось. Решил написать статью для повторного изучения.

что липкое

Sticky(MDN переводится как липкий эффект) даCSSАтрибутыpositionНеобязательное значение в . Используйте больше вместе с намиstatic, fixed,relative,absoluteНапример, используется для описания того, как элемент позиционируется.

С точки зрения эффекта,StickyКак гибрид, до того, как страница скользит к «точке перескакивания», она ведет себя какrelative, когда он достигает «критической точки», он ведет себя какfixed.

как использовать

использоватьCSS StickyТребуются только два условия.

position: sticky;
top: 0; // right/bottom/left 任一有效值，甚至可以为负像素值

top：0Это означает, что когда элемент перемещается на 0 пикселей из окна просмотра, а затем продолжает двигаться, элемент закрывается. допустимыйздесьПосмотрите на эффект (попробуйте изменить верхнее значение)

Сравните реализации JS

нетCSS StickyРанее аналогичные эффекты достигались с помощью JS. Общие шаги таковы:

  1. Слушайте события прокрутки и вычисляйте расстояние целевого элемента от области просмотра.
  2. Когда расстояние не соответствует условиям, держите пешки и не двигайтесь.
  3. Когда расстояние удовлетворяет условию, создайте элемент-заполнитель и измените метод позиционирования целевого элемента какfixed.
window.addEventListener('scroll', () => {
    const rect = elem.getBoundingClientRect();
    // 计算目标元素和视口的距离
})

Поищите по ключевому слову sticky в npm, там доступно много отличных пакетов. кreact-stickyНапример, при выполнении условия будет созданplaceholderэлементов (для предотвращения дрожания страницы), позволяяheaderпозиционируется какfixed.React Sticky

правильноChrome Dev-Toolsизlayersпанель, сгенерирована синяя частьplaceholder.

Сравнение двух схем на графике пламени (для увеличения эффекта ставлюcpuв 6 раз медленнее)

CSS-схема

css 方案

использоватьCSS Sticky, работа сданаGPU, не заниматьJSРесурсы основного потока очень плавно работают на мобильном терминале.

React Sticky

React Sticky 方案

из-за необходимостиscroll eventВызывается непрерывно в обратном вызовеgetBoundingClientRect,а такжеgetBoundingClientRectЭто вызовет перестановку страниц и перерисовку, а кадр упадет и зависнет, если вы не будете осторожны. Как раз для достижения такого эффекта (отсутствие другого контента на странице) очень рентабельно пойти на войну.

Вывод: добитьсяStickyэффект, желательноCSS Sticky

непонимание

1. Действует только внутри содержащего блока.

Исправлятьпример, используйте div, чтобы поместитьSticky Headerзавернули и нашлиStickyЭффект недействителен! ! !

  ...
  <div class="wrapper">
    <header>Sticky Header</header>
  </div>
  ...

Согласно документации,StickyЭффект толькоContaining Blockдействует внутри,Containing BlockПри скольжении по экрануStickey ElementТоже ускользнул.

Исправлятьwrapperвысота, чтобы увидеть эффект.

.wrapper {
  height: 100px;
  background-color: #e6e6e6;
}

несколькоSticky ElementПомещение его в один кусок будет иметь особый эффект, что предыдущий вытесняется последним.На самом деле он не вытесняется, аContaining Blockутащить его.

код здесь

2. Переполнение влияет на Sticky

Исправлятьпримеркод в , давая#rootплюсoverflow: auto

#root {
  overflow: auto; 
}

StickyЭффект опять пропал(overflowустановить на другойvisibleЭффективное значение , также имеет тот же эффект. )

После прочтения большого количества связанных документов мой вывод таков:

Sticky ElementЗначение смещения основано наnearest scrolling ancestor (расстояние до ближайшего предка прокрутки), если нет подходящего предка, в качестве ссылки используется область просмотра.

проблема вoverflow-xилиoverflow-yлюбой из не-visibleОн считается искомым элементом, и в процессе прокрутки окнаSticky Elementи найденный целевой предковый элементoffsetЗначение не изменилось, поэтомуStickyне работает.

Назначьте правильное лекарство, чтобы прокрутка происходила в элементе-предке, который «несоответствует» и может быть восстановленSticky Effect.

#root {
  overflow: auto; 
  height: 100vh;
}

совместимость

считатьprefixed,токcss stickyСовместимость на мобильном терминале достигает 94,14%, если вашему бизнесу необходимо позаботиться об оставшихся 5,86% пользователей, вы также можете использовать его.polyfillилиposition: fixed.

caniuse sticky

Ссылки по теме

Категории