fix(sticky): rerender sticky when threshold change (jdf2e#2564)

Alex-huxiyang · Sep 6, 2024 · 0c7dd1e · 0c7dd1e
1 parent d9f6072
commit 0c7dd1e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/packages/sticky/sticky.taro.tsx b/src/packages/sticky/sticky.taro.tsx
@@ -96,7 +96,7 @@ export const Sticky: FunctionComponent<Partial<StickyProps>> = (props) => {
       zIndex,
     }
     return style
-  }, [fixed, rootRect.height, rootRect.width, transform, position])
+  }, [fixed, rootRect.height, rootRect.width, transform, position, threshold])
 
   const handleScroll: any = async (scrollTop: number) => {
     const curRootRect = await getRectByTaro(rootRef.current)

diff --git a/src/packages/sticky/sticky.tsx b/src/packages/sticky/sticky.tsx
@@ -44,12 +44,13 @@ export const Sticky: FunctionComponent<Partial<StickyProps>> = (props) => {
   const stickyRef = useRef<HTMLDivElement>(null)
   const rootRef = useRef<HTMLDivElement>(null)
   const [isFixed, setIsFixed] = useState(false)
-
   const [stickyStyle, setStickyStyle] = useState<CSSProperties>({
     [position]: `${threshold}px`,
     zIndex,
   })
-
+  useEffect(() => {
+    setStickyStyle({ ...stickyStyle, [position]: `${threshold}px` })
+  }, [threshold, position])
   const [rootStyle, setRootStyle] = useState({})
 
   const getElement = useCallback(() => {