[new feature] IndexBar: add sticky prop (#3402)

packages/index-anchor/index.js

@@ -10,6 +10,32 @@ export default sfc({
     index: [String, Number]
   },
 
+  data() {
+    return {
+      top: 0,
+      active: false
+    };
+  },
+
+  computed: {
+    sticky() {
+      return this.active && this.parent.sticky;
+    },
+
+    anchorStyle() {
+      if (this.sticky) {
+        return {
+          top: `${this.top}px`,
+          zIndex: `${this.parent.zIndex}`
+        };
+      }
+    }
+  },
+
+  mounted() {
+    this.height = this.$el.offsetHeight;
+  },
+
   methods: {
     scrollIntoView() {
       this.$el.scrollIntoView();
@@ -17,9 +43,16 @@ export default sfc({
   },
 
   render(h) {
+    const { sticky } = this;
+
     return (
-      <div class={bem()}>
-        {this.slots('default') ? this.slots('default') : this.index}
+      <div style={{ height: sticky ? `${this.height}px` : null }}>
+        <div
+          style={this.anchorStyle}
+          class={[bem({ sticky }), { 'van-hairline--bottom': sticky }]}
+        >
+          {this.slots('default') || this.index}
+        </div>
       </div>
     );
   }

packages/index-anchor/index.less

@@ -5,4 +5,15 @@
   font-weight: @index-anchor-font-weight;
   font-size: @index-anchor-font-size;
   line-height: @index-anchor-line-height;
+  background-color: transparent;
+  transition: background-color .2s;
+
+  &--sticky {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    background-color: #fff;
+  }
 }