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>

themeSearchModalObserver

MutationObserver | null

themeSearchModalSyncTimer

number

toolbarScrollDirection

"up" | "down" | "none"

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.

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.

clearMobileFullscreenStyles(mobileWrapper)

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

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.

getFullscreenOverlayZIndex()

protected

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

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.

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.

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.

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.

isThemeSearchModalOpen()

protected

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

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.

normalizeOptions(options)

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

observeMutations()

Starts document mutation observation for sticky target/layout changes.

observeThemeSearchModal()

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

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.

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.

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.

setOption(options)

showPanelAfterToolbarOpenSettles(wrapper)

protected

Shows a panel hidden while toolbar/header positioning settles.

start(mode)

Starts sticky behavior in basic or bounded mode.

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.

updateToolbarScrollDirection()

protected

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