[new feature] add sticky component (#3888)

README.md

@@ -26,7 +26,7 @@
 
 ## Features
 
-* 60 Reusable components
+* 60+ Reusable components
 * 90% Unit test coverage
 * Extensive documentation and demos
 * Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

README.zh-CN.md

@@ -25,7 +25,7 @@
 
 ## 特性
 
-* 60 个组件
+* 60+ 个组件
 * 90% 单元测试覆盖率
 * 完善的中英文文档和示例
 * 支持按需引入

docs/markdown/intro.en-US.md

@@ -8,7 +8,7 @@
 
 ### Features
 
-* 60 Reusable components
+* 60+ Reusable components
 * 90% Unit test coverage
 * Extensive documentation and demos
 * Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

docs/markdown/intro.zh-CN.md

@@ -8,7 +8,7 @@
 
 ### 特性
 
-* 60 个组件
+* 60+ 个组件
 * 90% 单元测试覆盖率
 * 完善的中英文文档和示例
 * 支持按需引入

docs/site/doc.config.js

@@ -267,6 +267,10 @@ export default {
                 path: '/steps',
                 title: 'Steps 步骤条'
               },
+              {
+                path: '/sticky',
+                title: 'Sticky 粘性布局'
+              },
               {
                 path: '/swipe',
                 title: 'Swipe 轮播'
@@ -605,6 +609,10 @@ export default {
                 path: '/steps',
                 title: 'Steps'
               },
+              {
+                path: '/sticky',
+                title: 'Sticky'
+              },
               {
                 path: '/swipe',
                 title: 'Swipe'

src/index.less

@@ -26,6 +26,7 @@
 @import './rate/index';
 @import './steps/index';
 @import './step/index';
+@import './sticky/index';
 @import './tag/index';
 @import './tab/index';
 @import './tabs/index';

src/index.ts

@@ -68,6 +68,7 @@ import Slider from './slider';
 import Step from './step';
 import Stepper from './stepper';
 import Steps from './steps';
+import Sticky from './sticky';
 import SubmitBar from './submit-bar';
 import Swipe from './swipe';
 import SwipeCell from './swipe-cell';
@@ -156,6 +157,7 @@ const components = [
   Step,
   Stepper,
   Steps,
+  Sticky,
   SubmitBar,
   Swipe,
   SwipeCell,
@@ -253,6 +255,7 @@ export {
   Step,
   Stepper,
   Steps,
+  Sticky,
   SubmitBar,
   Swipe,
   SwipeCell,

src/sticky/README.md

@@ -0,0 +1,66 @@
+# Sticky
+
+### Install
+
+``` javascript
+import { Sticky } from 'vant';
+
+Vue.use(Sticky);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-sticky>
+  <van-button type="primary">Basic Usage</van-button>
+</van-sticky>
+```
+
+### Offset Top
+
+```html
+<van-sticky :offset-top="50">
+  <van-button type="info">Offset Top</van-button>
+</van-sticky>
+```
+
+### Set Container
+
+```html
+<div ref="container" style="height: 150px;">
+  <van-sticky :container="container">
+    <van-button type="warning">Set Container</van-button>
+  </van-sticky>
+</div>
+```
+
+```js
+export default {
+  data() {
+    return {
+      container: null
+    };
+  },
+  mounted() {
+    this.container = this.$refs.container;
+  }
+};
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| offset-top | Offset top | `number` | `0` | - |
+| z-index | z-index when sticky | `number` | `99` | - |
+| container | Container DOM | `HTMLElement` | - | - |
+
+### Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| scroll | Triggered when scroll | object: { scrollTop, isFixed } |

src/sticky/README.zh-CN.md

@@ -0,0 +1,76 @@
+# Sticky 粘性布局
+
+### 介绍
+
+Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。
+
+### 引入
+
+``` javascript
+import { Sticky } from 'vant';
+
+Vue.use(Sticky);
+```
+
+## 代码演示
+
+### 基础用法
+
+将内容包裹在`Sticky`组件内即可
+
+```html
+<van-sticky>
+  <van-button type="primary">基础用法</van-button>
+</van-sticky>
+```
+
+### 吸顶距离
+
+通过`offset-top`属性可以设置组件在吸顶时与顶部的距离
+
+```html
+<van-sticky :offset-top="50">
+  <van-button type="info">吸顶距离</van-button>
+</van-sticky>
+```
+
+### 指定容器
+
+通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部
+
+```html
+<div ref="container" style="height: 150px;">
+  <van-sticky :container="container">
+    <van-button type="warning">指定容器</van-button>
+  </van-sticky>
+</div>
+```
+
+```js
+export default {
+  data() {
+    return {
+      container: null
+    };
+  },
+  mounted() {
+    this.container = this.$refs.container;
+  }
+};
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| offset-top | 吸顶时与顶部的距离，单位`px` | `number` | `0` | - |
+| z-index | 吸顶时的 z-index | `number` | `99` | - |
+| container | 容器对应的 HTML 节点 | `HTMLElement` | - | - |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |

src/sticky/demo/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-sticky>
+        <van-button
+          type="primary"
+          style="margin-left: 15px;"
+        >
+          {{ $t('basicUsage') }}
+        </van-button>
+      </van-sticky>
+    </demo-block>
+
+    <demo-block :title="$t('offsetTop')">
+      <van-sticky :offset-top="50">
+        <van-button
+          type="info"
+          style="margin-left: 115px;"
+        >
+          {{ $t('offsetTop') }}
+        </van-button>
+      </van-sticky>
+    </demo-block>
+
+    <demo-block :title="$t('setContainer')">
+      <div
+        ref="container"
+        style="height: 150px; background-color: #fff;"
+      >
+        <van-sticky :container="container">
+          <van-button
+            type="warning"
+            style="margin-left: 215px;"
+          >
+            {{ $t('setContainer') }}
+          </van-button>
+        </van-sticky>
+      </div>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      offsetTop: '吸顶距离',
+      setContainer: '指定容器'
+    },
+    'en-US': {
+      offsetTop: 'Offset Top',
+      setContainer: 'Set Container'
+    }
+  },
+
+  data() {
+    return {
+      container: null
+    };
+  },
+
+  mounted() {
+    this.container = this.$refs.container;
+  }
+};
+</script>
+
+<style lang="less">
+.demo-sticky {
+  height: 200vh;
+
+  .van-button {
+    margin-left: 15px;
+  }
+}
+</style>

src/sticky/index.js

@@ -0,0 +1,119 @@
+import { createNamespace, isDef } from '../utils';
+import { BindEventMixin } from '../mixins/bind-event';
+import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/dom/scroll';
+
+const [createComponent, bem] = createNamespace('sticky');
+
+export default createComponent({
+  mixins: [
+    BindEventMixin(function (bind) {
+      if (!this.scroller) {
+        this.scroller = getScrollEventTarget(this.$el);
+      }
+
+      bind(this.scroller, 'scroll', this.onScroll, true);
+      this.onScroll();
+    })
+  ],
+
+  props: {
+    zIndex: Number,
+    container: null,
+    offsetTop: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      fixed: false,
+      height: 0,
+      transform: 0
+    };
+  },
+
+  computed: {
+    style() {
+      if (!this.fixed) {
+        return;
+      }
+
+      const style = {};
+
+      if (isDef(this.zIndex)) {
+        style.zIndex = this.zIndex;
+      }
+
+      if (this.offsetTop && this.fixed) {
+        style.top = `${this.offsetTop}px`;
+      }
+
+      if (this.transform) {
+        style.transform = `translate3d(0, ${this.transform}px, 0)`;
+      }
+
+      return style;
+    }
+  },
+
+  methods: {
+    onScroll() {
+      this.height = this.$el.offsetHeight;
+
+      const { container, offsetTop } = this;
+      const scrollTop = getScrollTop(this.scroller);
+      const topToPageTop = getElementTop(this.$el);
+
+      const emitScrollEvent = () => {
+        this.$emit('scroll', {
+          scrollTop,
+          isFixed: this.fixed
+        });
+      };
+
+      // The sticky component should be kept inside the container element
+      if (container) {
+        const bottomToPageTop = topToPageTop + container.offsetHeight;
+
+        if (scrollTop + offsetTop + this.height > bottomToPageTop) {
+          const distanceToBottom = this.height + scrollTop - bottomToPageTop;
+
+          if (distanceToBottom < this.height) {
+            this.fixed = true;
+            this.transform = -(distanceToBottom + offsetTop);
+          } else {
+            this.fixed = false;
+          }
+
+          emitScrollEvent();
+          return;
+        }
+      }
+
+      if (scrollTop + offsetTop > topToPageTop) {
+        this.fixed = true;
+        this.transform = 0;
+      } else {
+        this.fixed = false;
+      }
+
+      emitScrollEvent();
+    }
+  },
+
+  render(h) {
+    const { fixed } = this;
+    const style = {
+      height: fixed ? `${this.height}px` : null
+    };
+
+    return (
+      <div style={style}>
+        <div class={bem({ fixed })} style={this.style}>
+          {this.slots()}
+        </div>
+      </div>
+    );
+  }
+});

src/sticky/index.less

@@ -0,0 +1,11 @@
+@import '../style/var';
+
+.van-sticky {
+  &--fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: @sticky-z-index;
+  }
+}

src/sticky/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div>
+      <div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">
+        基础用法
+      </span></button></div>
+    </div>
+  </div>
+  <div>
+    <div style="height: 0px;">
+      <div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;"><span class="van-button__text">
+        吸顶距离
+      </span></button></div>
+    </div>
+  </div>
+  <div>
+    <div style="height: 150px; background-color: rgb(255, 255, 255);">
+      <div>
+        <div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;"><span class="van-button__text">
+          指定容器
+        </span></button></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/sticky/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`container prop 1`] = `
+<div style="height: 20px;">
+  <div style="height: 10px;">
+    <div class="van-sticky van-sticky--fixed" style="transform: translate3d(0, -5px, 0);">
+      Content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`container prop 2`] = `
+<div style="height: 20px;">
+  <div style="height: 10px;">
+    <div class="van-sticky" style="">
+      Content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`offset-top prop 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed" style="top: 10px;">
+    Content
+  </div>
+</div>
+`;
+
+exports[`sticky to top 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky">
+    Content
+  </div>
+</div>
+`;
+
+exports[`sticky to top 2`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed">
+    Content
+  </div>
+</div>
+`;
+
+exports[`z-index prop 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed" style="z-index: 0;">
+    Content
+  </div>
+</div>
+`;

src/sticky/test/demo.spec.js

@@ -0,0 +1,6 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+import { mockHTMLElementOffset } from '../../../test/utils';
+
+mockHTMLElementOffset();
+demoTest(Demo);

src/sticky/test/index.spec.js

@@ -0,0 +1,77 @@
+import { mount, mockScrollTop, mockHTMLElementOffset } from '../../../test/utils';
+import Vue from 'vue';
+import Sticky from '..';
+
+Vue.use(Sticky);
+
+test('sticky to top', () => {
+  const wrapper = mount({
+    template: `
+      <van-sticky style="height: 10px;">
+        Content
+      </van-sticky>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(100);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(0);
+});
+
+test('z-index prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-sticky style="height: 10px;" :z-index="0">
+        Content
+      </van-sticky>
+    `
+  });
+
+  mockHTMLElementOffset();
+  mockScrollTop(100);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(0);
+});
+
+test('offset-top prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-sticky style="height: 10px;" :offset-top="10">
+        Content
+      </van-sticky>
+    `
+  });
+
+  mockHTMLElementOffset();
+  mockScrollTop(100);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(0);
+});
+
+test('container prop', () => {
+  const wrapper = mount({
+    template: `
+      <div ref="container" style="height: 20px;">
+        <van-sticky ref="sticky" style="height: 10px;" :container="container">
+          Content
+        </van-sticky>
+      </div>
+    `,
+    data() {
+      return {
+        container: null
+      };
+    },
+    mounted() {
+      this.container = this.$refs.container;
+      mockHTMLElementOffset();
+    }
+  });
+
+  mockScrollTop(15);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(25);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(0);
+});

src/style/var.less

@@ -484,6 +484,9 @@
 // Steps
 @steps-background-color: @white;
 
+// Sticky
+@sticky-z-index: 99;
+
 // Stepper
 @stepper-active-color: #e8e8e8;
 @stepper-background-color: @active-color;

src/tab/test/__snapshots__/demo.spec.js.snap

@@ -161,13 +161,17 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
-          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
-          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 4</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+      <div>
+        <div class="van-sticky">
+          <div class="van-tabs__wrap van-hairline--top-bottom">
+            <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+              <div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
+              <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+              <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
+              <div role="tab" class="van-tab"><span class="van-ellipsis">标签 4</span></div>
+              <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+            </div>
+          </div>
         </div>
       </div>
       <div class="van-tabs__content">

src/tab/test/__snapshots__/index.spec.js.snap

@@ -13,12 +13,16 @@ exports[`border props 1`] = `
 
 exports[`change tabs data 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
-      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+  <div>
+    <div class="van-sticky">
+      <div class="van-tabs__wrap van-hairline--top-bottom">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+          <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -98,12 +102,16 @@ exports[`click to switch tab 2`] = `
 
 exports[`lazy render 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
-      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+  <div>
+    <div class="van-sticky">
+      <div class="van-tabs__wrap van-hairline--top-bottom">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+          <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -120,12 +128,16 @@ exports[`lazy render 1`] = `
 
 exports[`lazy render 2`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
-      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
+  <div>
+    <div class="van-sticky">
+      <div class="van-tabs__wrap van-hairline--top-bottom">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+          <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -160,11 +172,15 @@ exports[`name prop 1`] = `
 
 exports[`render nav-left & nav-right slot 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">Nav Left<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
-      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>Nav Right
+  <div>
+    <div class="van-sticky">
+      <div class="van-tabs__wrap van-hairline--top-bottom">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">Nav Left<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+          <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>Nav Right
+        </div>
+      </div>
     </div>
   </div>
   <div class="van-tabs__content">

src/tabs/index.js

@@ -1,24 +1,18 @@
 import { createNamespace, isDef, addUnit } from '../utils';
 import { scrollLeftTo } from './utils';
-import { on, off } from '../utils/dom/event';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
-import {
-  setRootScrollTop,
-  getScrollTop,
-  getElementTop,
-  getScrollEventTarget
-} from '../utils/dom/scroll';
+import { setRootScrollTop, getElementTop } from '../utils/dom/scroll';
 import Title from './Title';
 import Content from './Content';
+import Sticky from '../sticky';
 
 const [createComponent, bem] = createNamespace('tabs');
 
 export default createComponent({
   mixins: [
     ParentMixin('vanTabs'),
-    BindEventMixin(function (bind, isBind) {
-      this.bindScrollEvent(isBind);
+    BindEventMixin(function (bind) {
       bind(window, 'resize', this.setLine, true);
     })
   ],
@@ -72,8 +66,6 @@ export default createComponent({
   },
 
   data() {
-    this.scrollEvent = false;
-
     return {
       position: '',
       currentIndex: null,
@@ -89,23 +81,6 @@ export default createComponent({
       return this.children.length > this.swipeThreshold || !this.ellipsis;
     },
 
-    wrapStyle() {
-      switch (this.position) {
-        case 'top':
-          return {
-            top: this.offsetTop + 'px',
-            position: 'fixed'
-          };
-        case 'bottom':
-          return {
-            top: 'auto',
-            bottom: 0
-          };
-        default:
-          return null;
-      }
-    },
-
     navStyle() {
       return {
         borderColor: this.color,
@@ -144,13 +119,9 @@ export default createComponent({
       this.setLine();
 
       // scroll to correct position
-      if (this.position === 'top' || this.position === 'bottom') {
+      if (this.stickyFixed) {
         setRootScrollTop(getElementTop(this.$el) - this.offsetTop);
       }
-    },
-
-    sticky(val) {
-      this.bindScrollEvent(val);
     }
   },
 
@@ -171,40 +142,6 @@ export default createComponent({
       });
     },
 
-    bindScrollEvent(isBind) {
-      const sticky = this.sticky && isBind;
-
-      if (this.scrollEvent !== sticky) {
-        this.scrollEvent = sticky;
-        this.scrollEl = this.scrollEl || getScrollEventTarget(this.$el);
-        (sticky ? on : off)(this.scrollEl, 'scroll', this.onScroll, true);
-        this.onScroll();
-      }
-    },
-
-    // adjust tab position
-    onScroll() {
-      const scrollTop = getScrollTop(this.scrollEl) + this.offsetTop;
-      const elTopToPageTop = getElementTop(this.$el);
-      const elBottomToPageTop =
-        elTopToPageTop + this.$el.offsetHeight - this.$refs.wrap.offsetHeight;
-
-      if (scrollTop > elBottomToPageTop) {
-        this.position = 'bottom';
-      } else if (scrollTop > elTopToPageTop) {
-        this.position = 'top';
-      } else {
-        this.position = '';
-      }
-
-      const scrollParams = {
-        scrollTop,
-        isFixed: this.position === 'top'
-      };
-
-      this.$emit('scroll', scrollParams);
-    },
-
     // update nav bar style
     setLine() {
       const shouldAnimate = this.inited;
@@ -305,6 +242,11 @@ export default createComponent({
       this.$nextTick(() => {
         this.$refs.titles[index].renderTitle(el);
       });
+    },
+
+    onScroll(params) {
+      this.stickyFixed = params.isFixed;
+      this.$emit('scroll', params);
     }
   },
 
@@ -331,23 +273,36 @@ export default createComponent({
       />
     ));
 
+    const Wrap = (
+      <div
+        ref="wrap"
+        class={[
+          bem('wrap', { scrollable }),
+          { 'van-hairline--top-bottom': type === 'line' && this.border }
+        ]}
+      >
+        <div ref="nav" role="tablist" class={bem('nav', [type])} style={this.navStyle}>
+          {this.slots('nav-left')}
+          {Nav}
+          {type === 'line' && <div class={bem('line')} style={this.lineStyle} />}
+          {this.slots('nav-right')}
+        </div>
+      </div>
+    );
+
     return (
       <div class={bem([type])}>
-        <div
-          ref="wrap"
-          style={this.wrapStyle}
-          class={[
-            bem('wrap', { scrollable }),
-            { 'van-hairline--top-bottom': type === 'line' && this.border }
-          ]}
-        >
-          <div ref="nav" role="tablist" class={bem('nav', [type])} style={this.navStyle}>
-            {this.slots('nav-left')}
-            {Nav}
-            {type === 'line' && <div class={bem('line')} style={this.lineStyle} />}
-            {this.slots('nav-right')}
-          </div>
-        </div>
+        {this.sticky ? (
+          <Sticky
+            container={this.$el}
+            offsetTop={this.offsetTop}
+            onScroll={this.onScroll}
+          >
+            {Wrap}
+          </Sticky>
+        ) : (
+          Wrap
+        )}
         <Content
           count={this.children.length}
           animated={animated}

src/tabs/index.less

@@ -30,11 +30,6 @@
   position: relative;
 
   &__wrap {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 99;
     overflow: hidden;
 
     &--page-top {
@@ -132,8 +127,6 @@
   }
 
   &--line {
-    padding-top: @tabs-line-height;
-
     .van-tabs__wrap {
       height: @tabs-line-height;
     }

test/utils.ts

@@ -23,7 +23,7 @@ function getTouch(el: HTMLElement, x: number, y: number) {
 
 // Trigger pointer/touch event
 export function trigger(
-  wrapper: Wrapper<Vue> | HTMLElement,
+  wrapper: Wrapper<Vue> | HTMLElement | Window,
   eventName: string,
   x: number = 0,
   y: number = 0,
@@ -80,3 +80,33 @@ export function mockGetBoundingClientRect(rect: ClientRect | DOMRect): Function
     Element.prototype.getBoundingClientRect = originMethod;
   };
 }
+
+export function mockHTMLElementOffset() {
+  Object.defineProperties(HTMLElement.prototype, {
+    offsetLeft: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).marginLeft) || 0;
+      }
+    },
+    offsetTop: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).marginTop) || 0;
+      }
+    },
+    offsetHeight: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).height) || 0;
+      }
+    },
+    offsetWidth: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).width) || 0;
+      }
+    }
+  });
+}
+
+export function mockScrollTop(value: number) {
+  Object.defineProperty(window, 'scrollTop', { value, writable: true });
+  trigger(window, 'scroll');
+}

types/index.d.ts

@@ -70,6 +70,7 @@ export class Slider extends VanComponent {}
 export class Step extends VanComponent {}
 export class Stepper extends VanComponent {}
 export class Steps extends VanComponent {}
+export class Sticky extends VanComponent {}
 export class SubmitBar extends VanComponent {}
 export class Swipe extends VanComponent {}
 export class SwipeItem extends VanComponent {}