Home > widget-integration > StickyService

StickyService class

Signature:

export declare class StickyService 

Constructors

Constructor

Modifiers

Description

(constructor)()

Constructs a new instance of the StickyService class

Properties

Property

Modifiers

Type

Description

deferredFrame

number

deferredTimers

number[]

fallbackBoundary

HTMLElement | null

filter

HTMLElement | null

lastToolbarScrollY

number

layout

HTMLElement | null

listeners

StickyListener[]

mode

StickyMode

observer

MutationObserver | null

options

NormalizedBoostStickyOptions | null

original

StickyOriginalStyles | null

originalFilterBackground

string

state

protected

Signal<StickyServiceState>

stickyOverflowAncestors

Set<HTMLElement>

themeSearchModalObserver

MutationObserver | null

themeSearchModalSyncTimer

number

toolbarScrollDirection

"up" | "down" | "none"

topOffsetSettleTimers

number[]

topOffsetTransitionDeadline

number

topOffsetTransitionFrame

number

topOffsetTransitionListener

((event: Event) => void) | null

Methods

Method

Modifiers

Description

addListener(type, listener, options)

Registers a window listener that will be removed during cleanup.

apply()

Applies sticky positioning, dimensions, top offset, and stacking styles to the current target.

applyAndSettle()

Reapplies sticky styles now and again while the theme header animation settles.

applyBasic()

Starts basic sticky behavior.

applyBounded()

Starts bounded sticky behavior.

captureHiddenHeadersOnToolbarOpen()

protected

Captures hidden Shopify headers before opening mobile vertical filter panels.

cleanup()

Removes listeners, observers, timers, and restores original inline styles.

clearCleanupTimeouts(timers)

protected

Clears cleanup-bound timeouts registered by wrapper factory methods.

clearHiddenHeadersOnToolbarOpen()

protected

Clears captured hidden-header state, observer, and timers.

clearLeakedMobileFullscreenAncestors(fullscreenZIndex)

protected

Clears stale fullscreen ancestor z-index left by interrupted mobile overlay cleanup.

clearMobileFullscreenStyles(mobileWrapper)

Clears fullscreen mobile filter styles left by sticky mobile overlay behavior.

clearStickyOverflowAncestors(target)

protected

Clears configured clipping ancestors so CSS sticky can use the viewport scrollport.

clearStyles(element, properties)

protected

Clears inline styles through setStyle so already-empty values stay untouched.

create(options)

protected

Creates a configured sticky service instance, preserving extension support.

createsStackingContext(styles)

protected

Returns true when CSS creates a stacking context that can trap sticky overlays.

delayPanelUntilToolbarOpenSettles(wrapper)

protected

Temporarily hides a panel until toolbar/header positioning settles.

elevateAncestorStackingContexts(element, zIndex, originalStyles)

protected

Promotes ancestors so sticky toolbar UI can render above theme stacking contexts.

elevateElementAndAncestorsStackingContexts(element, zIndex, originalStyles)

protected

Promotes an element and its stacking-context ancestors.

elevateElementStackingContext(element, zIndex, originalStyles, background)

protected

Promotes a single element and stores its original stacking styles.

elevateVisibleHeaderStackingContexts(zIndex, originalStyles, background)

protected

Promotes visible fixed/sticky theme headers while a toolbar is pinned.

getAdditionalHeaderSelectors()

protected

Returns shop-specific fixed or sticky header selectors used for offset and stacking checks.

getFullscreenOverlayZIndex()

protected

Returns z-index used when mobile filter overlay must cover the full viewport.

getHeaderSelectors()

protected

Returns the complete selector list used to detect sticky theme headers.

getHiddenShopifyHeaders()

protected

Returns Shopify headers hidden by the current theme scroll behavior.

getHorizontalToolbarStickySelectors(options)

protected

Returns selectors and event name used by desktop horizontal toolbar sticky behavior.

Override this when a theme wraps the horizontal filter or uses different action/toggle markup.

getHorizontalToolbarStickySyncDelays(trigger)

protected

Returns delayed sync timings for horizontal toolbar sticky interactions.

Override this when a theme animation takes longer or shorter than Boost defaults.

getOpenThemeDrawerZIndex()

protected

Finds the active theme drawer z-index so Boost sticky UI can stay below open drawers.

getOriginBackground(element)

protected

Reads a visible, non-transparent background from a theme element.

getPinnedHeaderZIndex()

protected

Returns z-index used for headers temporarily pinned above fullscreen mobile filters.

getStickyOverflowAncestorSelectors()

protected

Returns shop-specific sticky ancestors whose overflow can be cleared safely.

getToolbarAncestorZIndex()

protected

Returns z-index used for toolbar ancestors promoted during sticky positioning.

getToolbarBackground(background)

protected

Returns the fallback toolbar background used when no explicit option is provided.

getToolbarBackgroundStyles(background)

protected

Builds sticky background styles for toolbar-based sticky layouts.

getToolbarStickyBackground(selector, background)

protected

Resolves toolbar background from the configured toolbar selector.

getTopOffset()

Computes the top offset from configured selectors, elements, and fallback theme headers.

getTopOffsetSettleDelays()

protected

Delays used to follow a theme header show/hide animation after scroll or resize.

Themes animate their header out over ~200-300ms, and the last scroll event fires before that animation ends, so the top offset computed during the scroll is stale. Override when a theme uses a longer transition.

getTopOffsetTransitionTimeout()

protected

Bounds the per-frame offset tracking in case a transitionend event never arrives.

getVisibleBottom(element)

Returns the visible bottom edge used as a top offset source.

getVisibleThemeHeaderZIndex()

protected

Finds the highest visible fixed or sticky theme header z-index.

getWindowScrollY()

protected

Returns the current scroll position. Override for shops with custom scroll containers.

handleMutations(mutations)

Handles DOM mutations that may require reapplying sticky dimensions or offsets.

isElement(value)

protected

Checks whether a value is a DOM element in the current runtime.

isElementVisibleInViewport(element)

protected

Checks whether an element is visible inside the current viewport.

isShopifyHeaderRevealing()

protected

Detects Dawn-style header reveal animation that can overlap the sticky filter panel.

isStickyManagedElement(node)

protected

Checks whether an element's inline styles are owned by sticky sync.

Override to add shop-specific elements that sticky customizations style directly.

isThemeSearchModalOpen()

protected

Detects visible theme search modals that should take stacking priority over Boost toolbar UI.

isTopOffsetMutation(mutation)

protected

Detects mutations on elements that contribute to sticky top offset.

isTopOffsetSource(node)

protected

Checks whether an element can move the sticky top offset.

Themes animate a wrapper that holds the header sections rather than the sections themselves, so an element that merely *contains* an offset source counts too.

isTransparentBackground(backgroundColor)

protected

Detects whether a CSS background value should be treated as transparent.

lockWidth()

Locks sticky width from target or child layout width.

makeBoostFilterSticky(options)

Creates a basic sticky filter instance.

makeBoostFilterStickyBounded(options)

Creates a bounded vertical filter sticky instance constrained by collection/product layout bounds.

makeBoostHorizontalFilterSticky(options)

Creates desktop horizontal filter sticky behavior for non-expand layouts.

makeBoostHorizontalToolbarSticky(options)

Creates desktop horizontal expand toolbar sticky behavior.

makeBoostMobileToolbarOffCanvasSticky(options)

Creates mobile off-canvas toolbar sticky behavior with fullscreen overlay alignment.

makeBoostMobileToolbarVerticalFilterSticky(options)

Creates mobile collapse-expand vertical filter sticky behavior.

makeBoostToolbarSticky(options)

Creates a sticky toolbar instance used by mobile and off-canvas filter modes.

makeBoostToolbarVerticalFilterSticky(options)

Creates desktop vertical expand toolbar sticky behavior with a bounded filter panel.

normalizeOffsetElements(input)

protected

Normalizes direct offset element input without resolving dynamic callbacks.

normalizeOptions(options)

Normalizes partial sticky options with defaults and safe selector/number handling.

normalizeSelectors(value)

protected

Normalizes selector input into a safe selector array.

observeMutations()

Starts document mutation observation for sticky target/layout changes.

observeThemeSearchModal()

Observes theme search modal state so Boost toolbar stacking stays below modal UI.

observeTopOffsetTransitions()

protected

Tracks theme header animations that move the sticky top offset.

queryFirst(selectors)

Returns the first matching element from a selector list.

refresh()

Re-resolves elements and reapplies sticky styles.

registerCleanupTimeout(timers, callback, delay)

protected

Registers a timeout that should be canceled when the wrapped sticky instance cleans up.

resolveBoundary()

Resolves the sticky boundary for bounded vertical sticky behavior.

resolveElements()

Resolves the sticky target, layout container, fallback boundary, and original inline styles.

resolveExtendedClass()

protected

Resolves the runtime-extended sticky service class.

resolveOffsetElements(input)

protected

Resolves configured dynamic or static top-offset elements.

resolveStickyBackground(element, background)

protected

Resolves the sticky element background, preferring explicit options and original theme color.

restoreAncestorStackingContexts(originalStyles)

protected

Restores inline styles saved before ancestor/header stacking promotion.

restoreHiddenHeadersOnToolbarOpen()

protected

Restores any hidden headers captured when the toolbar opened.

restoreHiddenShopifyHeaders(headers)

protected

Restores hidden Shopify header classes captured before toolbar open.

restoreStickyOverflowAncestors()

protected

Restores inline overflow styles changed by sticky overflow ancestor clearing.

revealHiddenHeaderWhenToolbarPinned(toolbar, allowReveal, topOffset)

protected

Reveals Shopify hidden headers when a sticky toolbar is pinned and user scrolls upward.

scheduleThemeSearchModalStackingSync()

Schedules a short delayed stacking sync for theme modal/drawer transitions.

scheduleTopOffsetSettleApplies()

protected

Reapplies sticky styles a few times after scroll or resize so the offset settles once the theme header animation finishes.

setOption(options)

Applies normalized sticky options to this service instance.

setStyle(element, property, value)

protected

Writes an inline style only when the value actually changes.

Sticky sync reruns on scroll, resize, and DOM mutations. Unconditional writes emit a style attribute mutation on every pass, which re-triggers the sticky MutationObservers and keeps the sync loop running with no user input. Override when a shop needs different write semantics.

setStyles(element, styles)

protected

Writes a set of inline styles through setStyle so unchanged values stay untouched.

shouldClearStickyOverflowAncestor(ancestor)

protected

Checks whether an ancestor is allowed to have clipping overflow cleared for sticky behavior.

shouldIgnoreMutations(mutations)

protected

Detects mutation batches produced by sticky sync itself so observers can skip them.

showPanelAfterToolbarOpenSettles(wrapper)

protected

Shows a panel hidden while toolbar/header positioning settles.

start(mode)

Starts sticky behavior in basic or bounded mode.

stopTrackingTopOffsetTransition()

protected

Stops per-frame offset tracking started by trackTopOffsetTransition.

syncOffCanvasPosition()

Synchronizes off-canvas panel top/height/z-index against sticky toolbar position.

syncPinnedHeaderStackingContexts(toolbar, topOffset, zIndex, originalStyles, background)

protected

Synchronizes header stacking while the toolbar is fixed or sticky near the top offset.

syncResolvedElements()

Re-resolves sticky DOM elements after filter markup changes.

syncThemeSearchModalStacking()

Synchronizes toolbar stacking with open theme search modals or drawers.

syncToolbarZIndexWithOpenThemeDrawer(toolbar, defaultZIndex)

protected

Updates toolbar z-index to avoid covering open theme drawers, search modals, or headers.

toElements(input)

protected

Normalizes an element, list, or collection into an element array.

trackTopOffsetTransition()

protected

Reapplies sticky styles every frame while a theme header animates in or out.

A header sliding back in overlaps the sticky toolbar until the offset catches up, and a header sliding out leaves a gap above it, so timer-based settling alone stays visibly behind mid-animation.

unobserveTopOffsetTransitions()

protected

Removes the transition listeners registered by observeTopOffsetTransitions.

updateToolbarScrollDirection()

protected

Tracks scroll direction for header reveal behavior during sticky toolbar interactions.