小程序中，搜索框的“吸顶”效果与position: sticky 详解

场景：

在小程序的home页面，导入自定义搜索组件,滑动页面时搜索框会向上滑动而消失，此时需要用到吸顶效果

home页面定义ui结构

home页面定义style样式——实现吸顶

position: sticky 详解

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

sticky 的本意是粘糊糊的，但在 css 中的表现更像是吸附。常见的吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}