#фишка дня

Использование position: sticky уже так-то стало обыденностью.

А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?

Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.

Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?

Или, наоборот, не прерывать просмотр рекламы? :)

Запросто: https://codepen.io/alinaki/pen/WbvMOPB

@container scroll-state(stuck: top) {
  .pip {
    width: 200px;
    transform: translate(-50%, 0%)
      translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
  }
}

Будни разработчика

0:27

Media is too big

VIEW IN TELEGRAM

#фишка дня

Использование position: sticky уже так-то стало обыденностью.

А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?

Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.

Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?

Или, наоборот, не прерывать просмотр рекламы? :)

Запросто: https://codepen.io/alinaki/pen/WbvMOPB

@container scroll-state(stuck: top) {
  .pip {
    width: 200px;
    transform: translate(-50%, 0%)
      translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
  }
}

Обратите внимание, translate можно складывать, получая интересную математику в итоге :)

А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).

#css #scroll #state

hottg.com/htmlshit/3648

3.2K viewsSergey Bekharsky, edited  Jun 12 at 07:54