spz-sticky#

#When to Use

When you need to use pin to top or bottom buttons, you can calculate the height of the overlay of other sticky or fixed positioning elements.

#Code Demonstration

#Basic Usage

The most basic usage, when on the page, the button will be displayed below the top position as fixed or sticky elements (if any, otherwise directly on top). The component will automatically recalculate its top value to be visible at the top of the page.

<spz-sticky layout="container" style="position: sticky; top: 0;">
  <button>Lorem</button>
</spz-sticky>

#Recalculate the Position of the Target Element

When a regular element with sticky positioning might have fixed or sticky elements at the top, you can use the target attribute to recalculate its position.

<spz-sticky layout="logic" target="header"></spz-sticky>

<header id="header" style="position: sticky; top: 0;">
  <!-- ... -->
</header>

#Invisible Button Display at Bottom

When the button scrolls up the page and becomes invisible, we want a button at the bottom of the page to appear to perform the same function. When initially entering the page, the spz-sticky element should be hidden, and need to work with the spz-observer to observe scroll visibility events to show or hide the spz-sticky element.

<div id="order-detail-need-sticky-buttons">
  <!-- ... -->
</div>
<spz-observer
  layout="logic"
  target="order-detail-need-sticky-buttons"
  @scrollToVisible="order-detail-sticky-buttons.hideSticky"
  @scrollToInvisible="order-detail-sticky-buttons.showSticky"
></spz-observer>
<spz-sticky layout="container" position="bottom" hidden id="order-detail-sticky-buttons">
  <button><!-- ... --></button>
</spz-sticky>
<!-- ... -->

#Properties

#Methods

#showSticky

Display the element, no parameters needed.

#hideSticky

Hide the element, no parameters needed.

#AI Summary (LLM Ready)

• Component ID: spz-sticky
• One-line purpose: Pin to top or bottom buttons.
• Detected attribute rows: 0
• Detected method subsections: 2
• Detected event subsections: 0
• Top attribute names: none (needs manual completion)
• Top method names: showSticky, hideSticky
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/