+
+
+ ```
+ ```js
+ import goodsData from 'example/data/goods-list.json'
+
+ const goods = goodsData.goods
+
+ export default {
+ components: {
+ CubePage
+ },
+ data() {
+ return {
+ data: goods,
+ current: goods[3].name
+ }
+ },
+ methods: {
+ changeHandler(label) {
+ console.log('changed to:', label)
+ },
+ stickyChangeHandler(current) {
+ console.log('sticky-change', current)
+ }
+ }
+ }
+ ```
+
+ If set `side-style` to `true` then the navigation bar will be at the side position.
+
+ `data` is the data source, it will be passed to `cube-scroll` component, if the `data` updated then `cube-scroll` will be auto refreshed.
+
+ `current` is the default navigation value(label of panel), if set this value then the target panel will be auto scrolled to the top of container.
+
+ The `sticky-change` event will be triggered when the navigation bar's sticky state changed. The parameter is one of `''`, `'cube-scroll-nav-bar'`.
+
+ You can use `prepend` slot to insert your own content before the main content.
+
+### Props
+
+#### CubeScrollNav
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| data | optional, data source | Array | - | - |
+| sideStyle | If set to `true` then the navigation bar will be at the side position | Boolean | true/false | false |
+| current | the default navigation value(label of panel) | String/Number | - | '' |
+| speed | speed of navigating to target panel | Number | - | 300 |
+
+#### CubeScrollNavPanel
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| label | required, the key of panel | String/Number | - | - |
+| title | the title of panel | String/Number | - | default equal to `label` Prop |
+
+### Slot
+
+| Name | Description | Scope Parameters |
+| - | - | - |
+| default | default panel content | - |
+| prepend | prepend content | - |
+| bar | navigation bar content, you should use `cube-scroll-nav-bar` component to define your own navigation bar content | labels: the collection of all panel labels txts: the collection of all panel titles current: current active navigation value(label of panel) |
+
+### Events
+
+| Event Name | Description | Parameters |
+| - | - | - |
+| change | triggers when navigation active item changed | active - active navigation value(label of panel) |
+| sticky-change | triggers when the navigation bar's sticky state changed | current - if navigation bar is fixed then this value will be 'cube-scroll-nav-bar', otherwise this value will be '' |
+
+### Instance methods
+
+| Method name | Description |
+| - | - |
+| refresh | You can call this method when content updated |
diff --git a/document/components/docs/en-US/sticky.md b/document/components/docs/en-US/sticky.md
new file mode 100644
index 000000000..16b16c5c5
--- /dev/null
+++ b/document/components/docs/en-US/sticky.md
@@ -0,0 +1,299 @@
+## Sticky
+
+> New in 1.10.0+
+
+Sticky component, the element will be sticky when the scroll position matched the target elements position.
+
+### Example
+
+- Default usage - Scroll
+
+ ```html
+
+
+
+
title
+
+
+
+
111
+
+
+
+
{{item}}
+
+
+
+
222
+
222
+
+
+
+
{{item}}
+
+
+
+
333
+
+
+
+
{{item}}
+
+
+
+
+
{{props.current}}
+
+
+
+ ```
+ ```js
+ const _data = [
+ '😀 😁 😂 🤣 😃 😄 ',
+ '🙂 🤗 🤩 🤔 🤨 😐 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '😔 😕 🙃 🤑 😲 ☹️ ',
+ '🐣 🐣 🐣 🐣 🐣 🐣 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '🐥 🐥 🐥 🐥 🐥 🐥 ',
+ '🤓 🤓 🤓 🤓 🤓 🤓 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '🦔 🦔 🦔 🦔 🦔 🦔 ',
+ '🙈 🙈 🙈 🙈 🙈 🙈 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '🚖 🚖 🚖 🚖 🚖 🚖 ',
+ '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 '
+ ]
+ export default {
+ data() {
+ return {
+ scrollEvents: ['scroll'],
+ scrollY: 0,
+ items: _data.concat(),
+ items2: _data.concat(),
+ items3: _data.concat()
+ }
+ },
+ methods: {
+ scrollHandler({ y }) {
+ this.scrollY = -y
+ }
+ }
+ }
+ ```
+
+ `cube-sticky` need to use with `cube-sticky-ele` component.
+
+ The `pos` Prop of `cube-sticky` component is the scroll runtime position value.
+
+ The `ele-key` Prop of `cube-sticky-ele` component is optional, it is used to define the key value of sticky ele. The default `ele-key` value is the current sticky ele's index value.
+
+ You can alse use `cube-sticky`'s `fixed` slot to define your own sticky HTML. If you do not use `fixed` slot then the default sticky content will be the active `cube-sticky-ele`'s content.
+
+- Default usage - Native Scroll
+
+ ```html
+
+
+
+
title
+
+
+
+
111
+
+
+
+
{{item}}
+
+
+
+
222
+
222
+
+
+
+
{{item}}
+
+
+
+
333
+
+
+
+
{{item}}
+
+
+
+ ```
+ ```js
+ const _data = [
+ '😀 😁 😂 🤣 😃 😄 ',
+ '🙂 🤗 🤩 🤔 🤨 😐 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '😔 😕 🙃 🤑 😲 ☹️ ',
+ '🐣 🐣 🐣 🐣 🐣 🐣 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '🐥 🐥 🐥 🐥 🐥 🐥 ',
+ '🤓 🤓 🤓 🤓 🤓 🤓 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '🦔 🦔 🦔 🦔 🦔 🦔 ',
+ '🙈 🙈 🙈 🙈 🙈 🙈 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '🚖 🚖 🚖 🚖 🚖 🚖 ',
+ '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 '
+ ]
+
+ export default {
+ data() {
+ return {
+ scrollY: 0,
+ checkTop: false,
+ items: _data.concat(),
+ items2: _data.concat(),
+ items3: _data.concat()
+ }
+ },
+ methods: {
+ scrollHandler(e) {
+ this.scrollY = e.currentTarget.scrollTop
+ }
+ }
+ }
+ ```
+ ```stylus
+ .scroll-ele
+ height: 100%
+ overflow: auto
+ -webkit-overflow-scrolling: touch
+ background-color: #fff
+ ```
+
+ `check-top` Prop is used to control the checking of boundary conditions, it's default value is `true`, this means `cube-sticky-ele` element will be sticky when the top of the `cube-sticky-ele` reaches the top of `cube-sticky`. This case the `check-top` is `false` which means `cube-sticky-ele` element will be sticky when the bottom of the `cube-sticky-ele` reaches the top of `cube-sticky`.
+
+- Like WeChat
+
+ ```html
+
+
+
+
+
+
111
+
+
+
+
{{item}}
+
+
+
{{item}}
+
+
+
{{item}}
+
+
+
+
header
+
+
+ ```
+ ```js
+ const _data = [
+ '😀 😁 😂 🤣 😃 😄 ',
+ '🙂 🤗 🤩 🤔 🤨 😐 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '😔 😕 🙃 🤑 😲 ☹️ ',
+ '🐣 🐣 🐣 🐣 🐣 🐣 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '🐥 🐥 🐥 🐥 🐥 🐥 ',
+ '🤓 🤓 🤓 🤓 🤓 🤓 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '🦔 🦔 🦔 🦔 🦔 🦔 ',
+ '🙈 🙈 🙈 🙈 🙈 🙈 ',
+ '👆🏻 scroll up/down 👇🏻 ',
+ '🚖 🚖 🚖 🚖 🚖 🚖 ',
+ '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 '
+ ]
+
+ export default {
+ data() {
+ return {
+ scrollEvents: ['scroll'],
+ scrollY: 0,
+ checkTop: true,
+ items: _data.concat(),
+ items2: _data.concat(),
+ items3: _data.concat()
+ }
+ },
+ methods: {
+ scrollHandler({ y }) {
+ this.scrollY = -y
+ },
+ diffChange() {
+ let opacity = 0
+ if (height) {
+ opacity = diff / height
+ }
+ this.$refs.stickyHeader.style.opacity = opacity
+ }
+ }
+ }
+ ```
+ ```stylus
+ .sticky-fixed-show-enter, .sticky-fixed-show-leave-active
+ transform: translate(0, -100%)
+ .sticky-fixed-show-enter-active, .sticky-fixed-show-leave-active
+ transition: all .5s ease-in-out
+ ```
+
+ `fixed-show-ani` is used to set the `transition` name of the sticky element when it's fixed.
+
+ You can get current sticky ele's fixed diff value on `diff-change` event.
+
+### Props
+
+#### CubeSticky
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| pos | required, scroll position | Number | - | - |
+| checkTop | whether to treat the top of sticky element as boundary, if this value is false means `cube-sticky-ele` will be sticky when the bottom of the `cube-sticky-ele` reaches the top of `cube-sticky` | Boolean | true/false | true |
+| fixedShowAni | the `transition` name of the sticky element | String | - | if checkTop is true this value will be '', otherwise this value will be 'cube-sticky-fixed-fade' |
+| offset | offset value, `pos+offset` will be the real pos value | Number | - | 0 |
+
+#### CubeStickyEle
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| eleKey | the key of sticky element | Number/String | - | - |
+
+If `eleKey` is undefined, CubeSticky will get the index of CubeStickyEle as the element's key.
+
+### Slot
+
+| Name | Description | Scope Parameters |
+| - | - | - |
+| default | default content | - |
+| fixed | custom sticky content when the sticky element is fixed | current: key of the fixed sticky element index: index of the sticky element(index is not reactive) |
+
+### Events
+
+| Event Name | Description | Parameters 1 | Parameters 2 |
+| - | - | - | - |
+| change | triggers when fixed sticky element changed | current - key of the fixed sticky element, if there is no fixed sticky element this value will be '' | index - index of sticky element, if there is no fixed sticky element this value will be -1 (index is not reactive) |
+| diff-change | triggers when sticky element scrolling diff value changed | diff - diff value | height: height of current sticky element |
+
+### Instance methods
+
+| Method name | Description |
+| - | - |
+| refresh | You can call this method when content updated |
diff --git a/document/components/docs/zh-CN/scroll-nav-bar.md b/document/components/docs/zh-CN/scroll-nav-bar.md
new file mode 100644
index 000000000..057358bc6
--- /dev/null
+++ b/document/components/docs/zh-CN/scroll-nav-bar.md
@@ -0,0 +1,130 @@
+## ScrollNavBar 组件
+
+> 1.10.0 新增
+
+滚动导航条组件，效果类似于滴滴打车业务线切换。
+
+### 示例
+
+- 横向，默认
+
+ ```html
+
+ ```
+ ```js
+ export default {
+ data() {
+ return {
+ current: '快车',
+ labels: [
+ '快车',
+ '小巴',
+ '专车',
+ '顺风车',
+ '代驾',
+ '公交',
+ '自驾租车',
+ '豪华车',
+ '二手车',
+ '出租车'
+ ]
+ }
+ },
+ methods: {
+ changeHandler(cur) {
+ this.current = cur
+ }
+ }
+ }
+ ```
+
+ 可以通过 `current` 指定 active 的 key 值，`labels` 则是所有的 key 值的集合；当 active 的值发生变化后，会触发 `change` 事件。
+
+- 竖向
+
+ ```html
+
+