Як працює position: sticky;
Елемент з position: sticky; фіксується в рамках найближчого батька, коли відстань до кордону найближчого прокручуваного батька досягає зазначеного у властивостях top. right. bottom. left значення. На те, в якому місці елемент прикріпиться і де відчепитися, також впливають властивості padding. margin і transform. Розміщення елемента над іншими елементами правиться за допомогою властивості z-index.
Після того, як властивість position прийме значення sticky. розмір елемента не зміниться, а сусідні елементи не зрушать на простір, що звільнився.
Прилипне до верхнього краю вікна браузера, коли верхній край вікна браузера буде нижче первісного розташування верхнього краю елемента, а нижній край елемента - вище нижнього краю найближчого батька.
Прилипне, зробивши відступ в 2em від верхнього краю вікна браузера, коли верхній край вікна браузера буде вище первісного розташування верхнього краю елемента не більше ніж на 2em, а нижній край елемента - вище нижнього краю найближчого батька.
Прилипне, зробивши відступ в -2em від верхнього краю вікна браузера, коли верхній край вікна браузера буде нижче первісного розташування верхнього краю елемента на більш ніж на 2em, а нижній край елемента - вище нижнього краю найближчого батька.
Прилипне до верхнього краю вікна браузера, коли верхній край вікна браузера буде нижче первісного розташування верхнього краю елемента, а нижній край елемента - вище нижнього краю найближчого батька на більш ніж 2em.
Прилипне до верхнього краю вікна браузера, коли верхній край вікна браузера буде нижче первісного розташування верхнього краю елемента, а нижній край елемента - нижче нижнього краю найближчого батька не більше ніж на 2em.
Прилипне, зробивши відступ в 2em від верхнього краю вікна браузера, коли верхній край вікна браузера буде вище первісного розташування верхнього краю елемента не більше ніж на 2em, а нижній край елемента - нижче нижнього краю найближчого батька не більше ніж на 2em.
Прилипне до верхнього краю вікна браузера, коли верхній край вікна браузера буде нижче первісного розташування верхнього краю елемента, а нижній край елемента - вище нижнього краю найближчого батька на більш ніж 2em.
Прилипне до нижнього краю вікна браузера, коли нижній край вікна браузера буде нижче верхнього краю найближчого батька, а нижній край елемента - вище свого первісного розташування.
Прилипне то до нижнього краю вікна браузера, то до верхнього
Буду показаний під зеленим блоком.