diff --git a/src/sticky/README.md b/src/sticky/README.md index c7896501e..fcb804a05 100644 --- a/src/sticky/README.md +++ b/src/sticky/README.md @@ -54,11 +54,11 @@ export default { ### Props -| Attribute | Description | Type | Default | -| ---------- | ------------------- | ------------------ | ------- | -| offset-top | Offset top | _number \| string_ | `0` | -| z-index | z-index when sticky | _number \| string_ | `99` | -| container | Container DOM | _Element_ | - | +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| offset-top `v2.8.7` | Offset top, supports `px` ans `rem` unit, default `px` | _number \| string_ | `0` | +| z-index | z-index when sticky | _number \| string_ | `99` | +| container | Container DOM | _Element_ | - | ### Events diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md index 52f6b44e1..e26650d6f 100644 --- a/src/sticky/README.zh-CN.md +++ b/src/sticky/README.zh-CN.md @@ -64,11 +64,11 @@ export default { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ---------- | ---------------------------- | ------------------ | ------ | -| offset-top | 吸顶时与顶部的距离,单位`px` | _number \| string_ | `0` | -| z-index | 吸顶时的 z-index | _number \| string_ | `99` | -| container | 容器对应的 HTML 节点 | _Element_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| offset-top `v2.8.7` | 吸顶时与顶部的距离,支持 `px` 和 `rem` 单位,默认 `px` | _number \| string_ | `0` | +| z-index | 吸顶时的 z-index | _number \| string_ | `99` | +| container | 容器对应的 HTML 节点 | _Element_ | - | ### Events diff --git a/src/sticky/index.js b/src/sticky/index.js index fb9b3be37..8dcba9e1e 100644 --- a/src/sticky/index.js +++ b/src/sticky/index.js @@ -1,4 +1,5 @@ import { isHidden } from '../utils/dom/style'; +import { unitToPx } from '../utils/format/unit'; import { createNamespace, isDef, isServer } from '../utils'; import { getScrollTop, getElementTop, getScroller } from '../utils/dom/scroll'; import { BindEventMixin } from '../mixins/bind-event'; @@ -40,6 +41,10 @@ export default createComponent({ }, computed: { + offsetTopPx() { + return unitToPx(this.offsetTop); + }, + style() { if (!this.fixed) { return; @@ -51,8 +56,8 @@ export default createComponent({ style.zIndex = this.zIndex; } - if (this.offsetTop && this.fixed) { - style.top = `${this.offsetTop}px`; + if (this.offsetTopPx && this.fixed) { + style.top = `${this.offsetTopPx}px`; } if (this.transform) { @@ -86,8 +91,7 @@ export default createComponent({ this.height = this.$el.offsetHeight; - const { container } = this; - const offsetTop = +this.offsetTop; + const { container, offsetTopPx } = this; const scrollTop = getScrollTop(window); const topToPageTop = getElementTop(this.$el); @@ -102,12 +106,12 @@ export default createComponent({ if (container) { const bottomToPageTop = topToPageTop + container.offsetHeight; - if (scrollTop + offsetTop + this.height > bottomToPageTop) { + if (scrollTop + offsetTopPx + this.height > bottomToPageTop) { const distanceToBottom = this.height + scrollTop - bottomToPageTop; if (distanceToBottom < this.height) { this.fixed = true; - this.transform = -(distanceToBottom + offsetTop); + this.transform = -(distanceToBottom + offsetTopPx); } else { this.fixed = false; } @@ -117,7 +121,7 @@ export default createComponent({ } } - if (scrollTop + offsetTop > topToPageTop) { + if (scrollTop + offsetTopPx > topToPageTop) { this.fixed = true; this.transform = 0; } else { diff --git a/src/sticky/test/__snapshots__/index.spec.js.snap b/src/sticky/test/__snapshots__/index.spec.js.snap index b76533137..be6374a1d 100644 --- a/src/sticky/test/__snapshots__/index.spec.js.snap +++ b/src/sticky/test/__snapshots__/index.spec.js.snap @@ -28,6 +28,14 @@ exports[`offset-top prop 1`] = ` `; +exports[`offset-top with rem unit 1`] = ` +