Sticky 粘性布局

基本用法

<wx-sticky>
  <div class="sticky-bar">基本用法</div>
</wx-sticky>

<style>
.sticky-bar {
    text-align: center;
    line-height: 28px;
    background-color: #06ae56;
    color: #fff;
}
</style>

吸顶距离

<wx-sticky :offset-top="28">
  <div class="sticky-bar">吸顶距离</div>
</wx-sticky>

观察容器

指定观察容器时，只有容器在可视范围内，粘性布局（即吸顶）才会生效。

<div style="height: 300px; border-bottom: 1px solid #aaa;" id="container">
  <wx-sticky :offset-top="56" observed-container="container">
    <div class="sticky-bar">观察容器</div>
  </wx-sticky>
  <div style="text-align: center; margin-top: 120px;">请继续滚动</div>
</div>

Sticky Attributes

参数	说明	类型	可选值	默认值
ObservedContainer	观察容器(或容器id)	String/Element	-	-
offsetTop	吸顶距离，默认单位px	Number	-	0

粘性布局