spz-sticky 粘性定位

支持布局: container fixed fixed-height fill flex-item logic

何时使用

需要使用置顶或者置底按钮时，可以计算其他粘性或固定定位元素遮挡的高度。

代码演示

基本用法

最基础的用法，当在页面中，按钮会显示在顶部 position 为 fixed 或 sticky 元素（如果有，否则直接放在顶部）的下方。组件会去自动重新计算它放置在页面顶部可见的 top 值。

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

重新计算目标元素的位置

当一个 sticky 定位的普通元素的顶部可能会出现 fixed 或 sticky 元素时，可以使用 target 属性来重新计算它的位置。

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

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

按钮不可见显示置底按钮

当按钮在页面向上滚动后不可见时，我们希望页面底部置底可以出现实现相同功能的按钮。当开始进入页面时，spz-sticky 元素应该隐藏，需要配合 spz-observer 的观察滚动可见性事件来显示或隐藏 spz-sticky 元素。

<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>
<!-- ... -->

属性

属性名	说明	类型	默认值	是否必需
position	位置：`top`, `bottom`	string	`top`	否
target	目标元素ID	string	-	否
show	当目标元素通过`showSticky`方法显示时自动加上，通过`hideSticky`方法隐藏时自动移除	-	-	否

方法

showSticky

显示元素，不需要参数。

hideSticky

隐藏元素，不需要参数。

AI 摘要（LLM Ready）

组件标识：spz-sticky
用途一句话：置顶或者置底按钮。
可识别属性条目：3
可识别方法小节：2
可识别事件小节：0
关键属性名（Top）：position、target、show
关键方法名（Top）：showSticky、hideSticky
关键事件名（Top）：无（待补充）
阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
关联文档：/guide/actions-and-events/ 、/guide/layouts/

spz-sticky 粘性定位#

#何时使用

#代码演示

#基本用法

#重新计算目标元素的位置

#按钮不可见显示置底按钮

#属性

#方法

#showSticky

#hideSticky

#AI 摘要（LLM Ready）