feat(Sticky): offset-top support rem unit (#6556)

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
 

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
 

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 {

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

@@ -28,6 +28,14 @@ exports[`offset-top prop 1`] = `
 </div>
 `;
 
+exports[`offset-top with rem unit 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed" style="top: 16px;">
+    Content
+  </div>
+</div>
+`;
+
 exports[`sticky to top 1`] = `
 <div style="height: 10px;">
   <div class="van-sticky">

src/sticky/test/index.spec.js

@@ -43,6 +43,26 @@ test('offset-top prop', () => {
   mockScrollTop(0);
 });
 
+test('offset-top with rem unit', () => {
+  const originGetComputedStyle = window.getComputedStyle;
+
+  window.getComputedStyle = () => ({ fontSize: '16px' });
+
+  const wrapper = mount({
+    template: `
+      <van-sticky style="height: 10px;" offset-top="1rem">
+        Content
+      </van-sticky>
+    `,
+  });
+
+  mockScrollTop(100);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(0);
+
+  window.getComputedStyle = originGetComputedStyle;
+});
+
 test('should not trigger scroll event when hidden', () => {
   const scroll = jest.fn();
   mount({