feat(Sticky): offset-top support vh unit (#7498)

src/utils/format/unit.ts

@@ -35,6 +35,11 @@ function convertVw(value: string) {
   return (+value * window.innerWidth) / 100;
 }
 
+function convertVh(value: string) {
+  value = value.replace(/vh/g, '');
+  return (+value * window.innerHeight) / 100;
+}
+
 export function unitToPx(value: string | number): number {
   if (typeof value === 'number') {
     return value;
@@ -44,10 +49,12 @@ export function unitToPx(value: string | number): number {
     if (value.indexOf('rem') !== -1) {
       return convertRem(value);
     }
-
     if (value.indexOf('vw') !== -1) {
       return convertVw(value);
     }
+    if (value.indexOf('vh') !== -1) {
+      return convertVh(value);
+    }
   }
 
   return parseFloat(value);

src/utils/test/index.spec.js

@@ -131,6 +131,8 @@ test('addUnit', () => {
 test('unitToPx', () => {
   const originGetComputedStyle = window.getComputedStyle;
 
+  window.innerWidth = 100;
+  window.innerHeight = 200;
   window.getComputedStyle = () => ({ fontSize: '16px' });
 
   expect(unitToPx(0)).toEqual(0);
@@ -138,6 +140,8 @@ test('unitToPx', () => {
   expect(unitToPx('10px')).toEqual(10);
   expect(unitToPx('0rem')).toEqual(0);
   expect(unitToPx('10rem')).toEqual(160);
+  expect(unitToPx('10vw')).toEqual(10);
+  expect(unitToPx('10vh')).toEqual(20);
 
   window.getComputedStyle = originGetComputedStyle;
 });