在Chrome模拟器运行时你可能会发现没有效果，这是因为Chrome并不支持原生sticky实现而模拟器环境是iPhone，目前程序是根据Safari版本来判断是否原生支持sticky。因此你可以切换到Android系统进行测试，但是真机上是完全正常的交互。

你也可以设置禁用原生支持检测以获得相同的效果：:check-sticky-support="false"

如果你没有使用100%的布局，也没有头部可以直接这样使用

<sticky>
  <div>Blabla</div>
</sticky>

如果你像demo一样使用view-box和x-header，那么需要这样：

<sticky scroll-box="vux_view_box_body" :offset="46">
  <div>Blabla</div>
</sticky>

建议加一个div高度为内容高度，这样可以避免当定位为sticky时下面的元素会突然向上走。

// 禁用原生检测时，可以在外围加
<div style="height:44px;">
  <sticky scroll-box="vux_view_box_body" :offset="46" :check-sticky-support="false">
    <div>Blabla</div>
  </sticky>
</div>

// 使用原生检测时，`div`紧挨着组件之后，并设置类名`vux-sticky-fill`
<sticky scroll-box="vux_view_box_body" :offset="46">
  <div>Blabla</div>
</sticky>
<div class="vux-sticky-fill" style="height:44px;"></div>

请不要直接照复制 demo 代码，滚动容器为 window 时请不要指定 scroll-box，滚动容器并非使用 view-box 时 id 并不是 vux_view_box_body，请按照实际情况来设定。

API

Props

name	type	default	description	required version
scroll-box	string	window	scroll tagget	--
check-sticky-support	boolean	true	if check if sticky is supported on current browser	--
offset	number	0	top distance	--
disabled	boolean	false	whether disable sticky	v2.9.0

Slots

name	description	required version
default	content	--

Functions

name	params	description	required version
bindSticky		manually re-bind sticky	v2.5.4

Variables

name	default	description	inherited name
@sticky-zindex	500	--

Contributors

Total commits quantity: 22，Total contributors quantity: 4

airyland dongj0316 万刚 zss007

Changelog

Releases

v2.9.0 [feature] add prop:disabled #2601
v2.9.0 [enhance] add development tip if scroll-box doesnot exist
v2.7.7 [fix] Fix the problem of inaccurate positioning and invalid positioning 0 #2367
v2.5.9 [fix] Fix scrollTop always return 0 #1827
v2.5.4 [fix] Auto re-bind after router-view transition is finished
v2.5.4 [fix] Fix position fixed not work in ios #1657
v2.1.1-rc.1 [fix] Fix wrong offset after transition between routes
v2.1.1-rc.1 [enhance] Set z-index #976 @olymk

VUX

Sticky

Install