- PVSM.RU - https://www.pvsm.ru -
Have you ever wondered how to track when elements with positions: sticky
become fixed? Eric Bidelman [1] has an amazing post [2] on this topic, go and read it now.
I've found some difficulties while using it in my project. Here they are:
sticky-change
event relates to header element, but you have to insert sentinels to header's parent (and make it position: relative
).--default-padding
greater than 40px
, which is top-sentinel's height.Let's try to improve it!
All of those issues reflect the same problem: Eric's solution is about tracking sticky's parent position, not sticky block itself. Let's improve this while keeping the original idea. How? We'll add sentinels to header itself and observe their intersection with container.
Here is how to do it:
top
property equals to header top
but with reverse sign minus 1. For example if your header have top: 10px
, then set sentinel header to -11px
. You can use something like top: calc(-1px + -1 * var( -- header-sticky-top))
or just set -1px
if you have header top equals to zero.isIntersecting = true
, intersectionRatio = 0
, and intersectionRect.top = rootBounds.top
visibility: hidden
and pointer-events: none
to sentinels.Check out demo [3] and sources [4] here
Автор: Yavanosta
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/305371
Ссылки в тексте:
[1] Eric Bidelman: https://developers.google.com/web/resources/contributors/ericbidelman
[2] post: https://developers.google.com/web/updates/2017/09/sticky-headers
[3] demo: https://cdn.rawgit.com/Yavanosta/sentinel-demo/076b8b95/index.html
[4] sources: https://github.com/Yavanosta/sentinel-demo/blob/master/index.html
[5] Источник: https://habr.com/ru/post/436182/?utm_campaign=436182
Нажмите здесь для печати.