https://carrot.com/app/themes/spark/assets/scripts/components/calculateStickyPositionTopOffset.js

1/**
2 * Recalculate the top offset for sticky elements which are not
3 * a direct descendant of a sticky template part.
4 *
5 * @return void
6 */
7const calculateStickyPositionTopOffset = () => {
8  const maybeAdminBarElement = document.getElementById('wpadminbar');
9  const stickyElements = [
10    ...document.querySelectorAll('.is-position-sticky'),
11  ].filter((el) => el instanceof HTMLElement);
12  const stickyTemplateElements = stickyElements.filter(isTemplatePart);
13  const stickyContentElements = stickyElements.filter(
14    (el) => !isTemplatePart(el)
15  );
16
17  const basePositionTopOffset = stickyTemplateElements.reduce(
18    (offset, el) => offset + el.getBoundingClientRect().height,
19    maybeAdminBarElement?.getBoundingClientRect().height ?? 0
20  );
21
22  stickyContentElements.forEach((el) => {
23    const top = basePositionTopOffset + getElementPositionTopValue(el);
24    el.style.top = `${top}px`;
25  });
26};
27
28/**
29 * Check if an element is a descendant of `.wp-block-template-part`.
30 *
31 * @param {HTMLElement} el The element to check.
32 * @returns {boolean} True if the element is a template part, false otherwise.
33 */
34const isTemplatePart = (el) => !!el.closest('.wp-block-template-part');
35
36/**
37 * Get the top offset of an element, as defined in CSS.
38 *
39 * @param {HTMLElement} el The element to get the positionTop offset of.
40 * @returns {number} The positionTop offset in pixels.
41 */
42const getElementPositionTopValue = (el) =>
43  parseFloat(window.getComputedStyle(el).top ?? '0');
44
45export { calculateStickyPositionTopOffset };