fix(Sticky): default z-index (#1975)

example/pages/sticky/index.wxml

@@ -7,7 +7,7 @@
 </demo-block>
 
 <demo-block title="吸顶距离">
-  <van-sticky offset-top="{{30}}">
+  <van-sticky offset-top="{{ 50 }}">
     <van-button type="info" style="margin-left: 115px">
       吸顶距离
     </van-button>

packages/sticky/README.md

@@ -1,6 +1,11 @@
 # Sticky 粘性布局
 
+### 介绍
+
+Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。
+
 ### 引入
+
 在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
 
 ```json
@@ -27,7 +32,7 @@
 通过`offset-top`属性可以设置组件在吸顶时与顶部的距离
 
 ```html
-<van-sticky offset-top="{{ 30 }}">
+<van-sticky offset-top="{{ 50 }}">
   <van-button type="info">吸顶距离</van-button>
 </van-sticky>
 ```

packages/sticky/index.ts

@@ -7,7 +7,7 @@ VantComponent({
   props: {
     zIndex: {
       type: Number,
-      value: 1
+      value: 99
     },
     offsetTop: {
       type: Number,
@@ -24,10 +24,7 @@ VantComponent({
 
   methods: {
     setWrapStyle() {
-      const { offsetTop, position } = this.data as {
-        offsetTop: number
-        position: Position
-      };
+      const { offsetTop, position } = this.data;
       let wrapStyle: string;
       let containerStyle: string;
 
@@ -51,11 +48,19 @@ VantComponent({
           containerStyle = '';
       }
 
-      // cut down `set`x
-      let data: any = {};
-      if (wrapStyle !== this.data.wrapStyle) data.wrapStyle = wrapStyle;
-      if (containerStyle !== this.data.containerStyle) data.containerStyle = containerStyle;
-      if (JSON.stringify(data) !== '{}') this.set(data);
+      const data: Record<string, string> = {};
+
+      if (wrapStyle !== this.data.wrapStyle) {
+        data.wrapStyle = wrapStyle;
+      }
+
+      if (containerStyle !== this.data.containerStyle) {
+        data.containerStyle = containerStyle;
+      }
+
+      if (JSON.stringify(data) !== '{}') {
+        this.set(data);
+      }
     },
 
     setPosition(position: Position) {
@@ -75,43 +80,49 @@ VantComponent({
 
       // @ts-ignore
       this.createIntersectionObserver()
-        .relativeToViewport({ top: - (this.itemHeight + offsetTop) })
-        .observe('.van-sticky', (res: WechatMiniprogram.ObserveCallbackResult) => {
-          const { top } = res.boundingClientRect;
+        .relativeToViewport({ top: -(this.itemHeight + offsetTop) })
+        .observe(
+          '.van-sticky',
+          (res: WechatMiniprogram.ObserveCallbackResult) => {
+            const { top } = res.boundingClientRect;
 
-          if (top > offsetTop) {
-            return;
+            if (top > offsetTop) {
+              return;
+            }
+
+            const position: Position = 'top';
+
+            this.$emit('scroll', {
+              scrollTop: top + offsetTop,
+              isFixed: true
+            });
+
+            this.setPosition(position);
           }
-
-          const position: Position = 'top';
-
-          this.$emit('scroll', {
-            scrollTop: top + offsetTop,
-            isFixed: true
-          });
-
-          this.setPosition(position);
-        });
+        );
 
       // @ts-ignore
       this.createIntersectionObserver()
         .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) })
-        .observe('.van-sticky', (res: WechatMiniprogram.ObserveCallbackResult) => {
-          const { top, bottom } = res.boundingClientRect;
+        .observe(
+          '.van-sticky',
+          (res: WechatMiniprogram.ObserveCallbackResult) => {
+            const { top, bottom } = res.boundingClientRect;
 
-          if (bottom <= this.itemHeight - 1) {
-            return;
+            if (bottom <= this.itemHeight - 1) {
+              return;
+            }
+
+            const position: Position = res.intersectionRatio > 0 ? 'top' : '';
+
+            this.$emit('scroll', {
+              scrollTop: top + offsetTop,
+              isFixed: position === 'top'
+            });
+
+            this.setPosition(position);
           }
-
-          const position: Position = res.intersectionRatio > 0 ? 'top' : '';
-
-          this.$emit('scroll', {
-            scrollTop: top + offsetTop,
-            isFixed: position === 'top'
-          });
-
-          this.setPosition(position);
-        });
+        );
     }
   },