diff --git a/features/withdrawals/claim/form/claim-form-footer-sticky.tsx b/features/withdrawals/claim/form/claim-form-footer-sticky.tsx index 7de18044b..5c67b481a 100644 --- a/features/withdrawals/claim/form/claim-form-footer-sticky.tsx +++ b/features/withdrawals/claim/form/claim-form-footer-sticky.tsx @@ -22,7 +22,6 @@ const STICK_CHECKPOINT_OFFSET = type ScrollState = { isSticked: boolean; - footerShift: number; }; type ScrollStateSetter = < @@ -49,7 +48,6 @@ export const ClaimFormFooterSticky: FC< // frequent operations performant during scroll const { current: scrollState } = useRef({ isSticked: false, - footerShift: -1, }); const setStateAndUpdate = useCallback( @@ -70,7 +68,6 @@ export const ClaimFormFooterSticky: FC< const { y: screenH, x: screenW } = getScreenSize(); const rectRequests = elRequests.getBoundingClientRect(); const rectFooter = elFooter.getBoundingClientRect(); - const footerHeight = elFooter.clientHeight; const menuOffset = screenW < NAV_MOBILE_MAX_WIDTH ? NAV_MOBILE_HEIGHT : 0; // Calcs @@ -87,17 +84,8 @@ export const ClaimFormFooterSticky: FC< if (!scrollState.isSticked) { setStateAndUpdate('isSticked', true); } - - const currFooterShift = - footerHeight - Math.min(distanceFromElStart, footerHeight) - menuOffset; - if (currFooterShift !== scrollState.footerShift) { - elFooter.style.setProperty('bottom', `${-currFooterShift}px`); - scrollState.footerShift = currFooterShift; - } } else { if (scrollState.isSticked) { - scrollState.footerShift = -1; - elFooter.style.removeProperty('bottom'); setStateAndUpdate('isSticked', false); } } @@ -107,7 +95,6 @@ export const ClaimFormFooterSticky: FC< const positionInitializatorEffect = useCallback(() => { if (!isEnabled) return; - const elFooter = refFooter.current; // Event subscriptions window.addEventListener('resize', updatePosition, { passive: true }); @@ -116,8 +103,6 @@ export const ClaimFormFooterSticky: FC< return () => { window.removeEventListener('resize', updatePosition); window.removeEventListener('scroll', updatePosition); - scrollState.footerShift = -1; - if (elFooter) elFooter.style.removeProperty('bottom'); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [isEnabled]); diff --git a/features/withdrawals/claim/form/styles.ts b/features/withdrawals/claim/form/styles.ts index 314431a95..6a7b8b614 100644 --- a/features/withdrawals/claim/form/styles.ts +++ b/features/withdrawals/claim/form/styles.ts @@ -85,7 +85,7 @@ export const ClaimFooterBodyEnder = styled.div` export const ClaimFormFooterWrapper = styled.div<{ isSticked: boolean }>` position: ${({ isSticked }) => (isSticked ? 'sticky' : 'relative')}; - bottom: 0; + bottom: ${({ isSticked }) => (isSticked ? `60px` : '0px')}; ${({ isSticked }) => isSticked && css`