Affix

Quick Start

Always Fixed

---

<div ref="d1" style="width: 80%; height: 500px; overflow: overlay;">
<div style="width: 80%; height: 300px; background: rgba(0, 204, 153, 0.1); overflow: overlay;"></div>
<fv-Affix :target="() => $refs.d1" left="0" :top="0">
<fv-button>Fixed</fv-button>
</fv-Affix>
<div style="width: 80%; height: 2000px; background: rgba(0, 153, 204, 0.1); overflow: overlay;">
</div>
</div>

Affix-Affix Top

---

Affix Top 1

Affix Top 2

Affix Top 3

Affix Top 4

Affix Top 5

Affix Top 6

Affix Top 7

Affix Top 8

Affix Top 9

Affix Top 10

<div ref="d2" style="width: 80%; height: 500px; overflow: overlay;">
<div style="width: 80%; height: 300px; background: rgba(0, 204, 153, 0.1); overflow: overlay;"></div>
<fv-Affix v-for="(item, index) in 10" :key="index" :target="() => $refs.d2" mode="auto" :left="0" :top="0">
<fv-button>Affix Top {{index + 1}}</fv-button>
</fv-Affix>
<div style="width: 80%; height: 2000px; background: rgba(0, 153, 204, 0.1); overflow: overlay;">
</div>
</div>

Affix-Affix Top and Bottom

Affix Top and Bottom

<div ref="d3" style="width: 80%; height: 500px; overflow: overlay;">
<div style="width: 80%; height: 600px; background: rgba(0, 204, 153, 0.1); overflow: overlay;"></div>
<fv-Affix :target="() => $refs.d3" mode="auto" :bottom="0" :affixPos="['top', 'bottom']">
<fv-button style="width: 150px;">Affix Top and Bottom</fv-button>
</fv-Affix>
<div style="width: 80%; height: 2000px; background: rgba(0, 153, 204, 0.1); overflow: overlay;">
</div>
</div>

Propoties

---

属性(attr)	类型(type)	必填(required)	默认值(default)	说明(statement)
left	String	No	N/A	left属性值, 参照HTML属性
top	String	No	N/A	top属性值, 参照HTML属性
right	String	No	N/A	right属性值, 参照HTML属性
bottom	String	No	N/A	bottom属性值, 参照HTML属性
target	Function	Yes	N/A	Affix的目标元素, 为一个函数
mode	String	No	fixed	Affix的模式, fixed, relative或auto
affixPos	Array	No	['top']	Affix的在父元素滚动吸附位置, 可以为left, top, right 和 bottom
zIndex	Number	No	N/A	Affix容器的z-index值
theme	String	No	system	主题样式, 包含light, dark, system, custom几种样式

Events

---

事件名(Name)	参数类型(args)	说明(statement)
change	Boolean	当固定状态发生改变时触发, 返回是否固定

Slot

---

1. Default

<fv-affix>
    <div></div>
</fv-affix>

特别地 若需要进行性能优化, 可以考虑在元素被隐藏时, 将mode设置为relative.