当我们在移动端h5页面使用Sticky等组件时
组件原理: 再移动至指定位置后,为其添加一个fixed,并且填充一个高度一样的背部div去撑开
导致的问题: 再告诉滑动的时候,因为fixed及render,会出现抖动的情况
解决方案:
提前为其挂载fixed,并且设置top为1px,再添加一个 ::beforer, 同样为 fixed,去把顶部1px的间隙填满。
以vant sticky为例
<div class="full-header-wrapper">
<Sticky offset-top="1px">
<div class="full-header">
<slot></slot>
<div class="full-header-bottom">
<slot name="bottom"></slot>
</div>
</div>
</Sticky>
</div>
.full-header-wrapper {
&::before {
position: fixed;
top: 0px; // 设置成和导航栏一样的高度
z-index: 99;
content: '';
height: 2px;
width: 100%;
background-color: #0060E6; // 与头部底色一致
}
}