From b1a687b9a4809769d01ebbc4ae1424027e451310 Mon Sep 17 00:00:00 2001 From: "xiaziqi.sia" Date: Fri, 12 Jul 2024 21:03:40 +0800 Subject: [PATCH 1/3] fix: absolute `Sticky` left position --- packages/arcodesign/components/sticky/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/arcodesign/components/sticky/index.tsx b/packages/arcodesign/components/sticky/index.tsx index 861171fe..ec6a385d 100644 --- a/packages/arcodesign/components/sticky/index.tsx +++ b/packages/arcodesign/components/sticky/index.tsx @@ -198,6 +198,8 @@ const Sticky = forwardRef((props: StickyProps, ref: Ref) => { const needTop = position === 'top' || position === 'both'; const needBottom = position === 'bottom' || position === 'both'; + const offsetParent = contentRef.current.offsetParent; + const offsetParentRect = offsetParent?.getBoundingClientRect(); const placeholderClientRect = placeholderRef.current!.getBoundingClientRect(); const contentClientRect = contentRef.current.getBoundingClientRect(); const calculatedHeight = contentClientRect.height; @@ -251,7 +253,10 @@ const Sticky = forwardRef((props: StickyProps, ref: Ref) => { : cssBottom + bottomFollowDifference, } : {}), - left: placeholderClientRect.left, + left: + stickyStyle === 'absolute' + ? placeholderClientRect.left - (offsetParentRect?.left || 0) + : placeholderClientRect.left, width: placeholderClientRect.width, ...(userSetStickyCssStyle || {}), }; From 9f6a80a1f1004f65490bf7092168cc4ec396e0cf Mon Sep 17 00:00:00 2001 From: "xiaziqi.sia" Date: Sun, 21 Jul 2024 16:26:26 +0800 Subject: [PATCH 2/3] fix: `Sticky` position when absolute --- .../arcodesign/components/sticky/index.tsx | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/arcodesign/components/sticky/index.tsx b/packages/arcodesign/components/sticky/index.tsx index ec6a385d..273fb536 100644 --- a/packages/arcodesign/components/sticky/index.tsx +++ b/packages/arcodesign/components/sticky/index.tsx @@ -213,7 +213,11 @@ const Sticky = forwardRef((props: StickyProps, ref: Ref) => { const disFromTop = Math.round(placeholderClientRect.top - containerTop); const disFromBottom = Math.round( - placeholderClientRect.top + calculatedHeight - containerBottom, + placeholderClientRect.top + + calculatedHeight - + (stickyStyle === 'absolute' + ? offsetParentRect?.bottom || containerBottom + : containerBottom), ); const topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop; @@ -228,11 +232,22 @@ const Sticky = forwardRef((props: StickyProps, ref: Ref) => { ? disFromBottom >= -bottomOffset && followTop < containerBottom - followOffset : false; const newStickyState = isTopSticky || isBottomSticky; - - const cssTop = (stickyStyle === 'absolute' ? 0 : containerTop) + topOffset; + const cssTop = + (stickyStyle === 'absolute' + ? Math.max( + 0, + placeholderClientRect.top - + (offsetParentRect?.top || placeholderClientRect.top), // offsetParentRect.top不存在时，用placeholderClientRect.top兜底使计算值为0 + ) + : containerTop) + topOffset; const cssBottom = (stickyStyle === 'absolute' ? 0 : window.innerHeight - containerBottom) + bottomOffset; + const cssLeft = + stickyStyle === 'absolute' + ? placeholderClientRect.left - (offsetParentRect?.left || 0) + : placeholderClientRect.left; + let stickyCssStyle: CSSProperties = {}; if (newStickyState) { stickyCssStyle = { @@ -253,10 +268,7 @@ const Sticky = forwardRef((props: StickyProps, ref: Ref) => { : cssBottom + bottomFollowDifference, } : {}), - left: - stickyStyle === 'absolute' - ? placeholderClientRect.left - (offsetParentRect?.left || 0) - : placeholderClientRect.left, + left: cssLeft, width: placeholderClientRect.width, ...(userSetStickyCssStyle || {}), }; From 2474a93402c45c45b69685df7feeb16aa6d5a12b Mon Sep 17 00:00:00 2001 From: "xiaziqi.sia" Date: Sun, 21 Jul 2024 16:27:43 +0800 Subject: [PATCH 3/3] fix: `StickyTabs` style --- sites/composite-comp/sticky-tabs/sticky-tab-css.md | 2 +- sites/composite-comp/sticky-tabs/sticky-tab-hide.md | 6 +++--- sites/composite-comp/sticky-tabs/sticky-tab-position.md | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/sites/composite-comp/sticky-tabs/sticky-tab-css.md b/sites/composite-comp/sticky-tabs/sticky-tab-css.md index 1e80c2e5..d6f7dc33 100644 --- a/sites/composite-comp/sticky-tabs/sticky-tab-css.md +++ b/sites/composite-comp/sticky-tabs/sticky-tab-css.md @@ -76,7 +76,7 @@ export default function StickyTabsCss() { .sticky-tabs-wrapper-css-nav-bar { position: sticky; background: #fff; - top: 44px; + top: 64px; } } ``` diff --git a/sites/composite-comp/sticky-tabs/sticky-tab-hide.md b/sites/composite-comp/sticky-tabs/sticky-tab-hide.md index e2e4214f..1b1d95f1 100644 --- a/sites/composite-comp/sticky-tabs/sticky-tab-hide.md +++ b/sites/composite-comp/sticky-tabs/sticky-tab-hide.md @@ -95,9 +95,9 @@ export default function StickyTabsHide() { .rem(font-size, 20); .use-var(color, sub-info-font-color); } - .arcodesign-mobile-demo-content { - position: relative; - } } +&.arcodesign-mobile-demo-content { + position: relative; +} ``` diff --git a/sites/composite-comp/sticky-tabs/sticky-tab-position.md b/sites/composite-comp/sticky-tabs/sticky-tab-position.md index 7b2332ad..f839d477 100644 --- a/sites/composite-comp/sticky-tabs/sticky-tab-position.md +++ b/sites/composite-comp/sticky-tabs/sticky-tab-position.md @@ -105,8 +105,8 @@ export default function StickyTabsPosition() { .rem(font-size, 20); .use-var(color, sub-info-font-color); } - .arcodesign-mobile-demo-content { - position: relative; - } +} +&.arcodesign-mobile-demo-content { + position: relative; } ```