Короткая панель остаётся у верхнего края окна. Длинная едет вместе со страницей, пока край, к которому вы скроллите, не упрётся в экран.
Скролл вниз прижимает низ панели к низу окна. Скролл вверх отпускает её и прижимает верх. Между этими моментами панель просто стоит в колонке.
Отступ задаёт CSS. Здесь числа пишут переменные --sticky-aside-top и --sticky-aside-bottom. С Tailwind вместо них передают top-16 md:top-24.
Замок держит панель на той высоте окна, где она была в момент включения. Если колонка уехала и замок больше не попадает в неё, панель возвращается внутрь колонки.
Ядро не знает про Vue, React, Svelte, Solid, Astro и Angular. Адаптер отдаёт ему два элемента и слушает пропсы.
Измерение делает невидимая планка. Она приклеена к окну между верхним и нижним отступом, а её высота не больше высоты панели.
Слушатель висит на window. Вложенный скролл контейнера эта версия не обрабатывает.
Ширина зафиксированной панели берётся у колонки. Иначе fixed выскочит из сетки и растянется на весь экран.
Короткая панель остаётся у верхнего края окна. Длинная едет вместе со страницей, пока край, к которому вы скроллите, не упрётся в экран.
Скролл вниз прижимает низ панели к низу окна. Скролл вверх отпускает её и прижимает верх. Между этими моментами панель просто стоит в колонке.
Отступ задаёт CSS. Здесь числа пишут переменные --sticky-aside-top и --sticky-aside-bottom. С Tailwind вместо них передают top-16 md:top-24.
Замок держит панель на той высоте окна, где она была в момент включения. Если колонка уехала и замок больше не попадает в неё, панель возвращается внутрь колонки.
Ядро не знает про Vue, React, Svelte, Solid, Astro и Angular. Адаптер отдаёт ему два элемента и слушает пропсы.
Измерение делает невидимая планка. Она приклеена к окну между верхним и нижним отступом, а её высота не больше высоты панели.
Слушатель висит на window. Вложенный скролл контейнера эта версия не обрабатывает.
Ширина зафиксированной панели берётся у колонки. Иначе fixed выскочит из сетки и растянется на весь экран.