풋터 스크롤 움직임 추가
This commit is contained in:
@@ -5,12 +5,14 @@ import {
|
|||||||
FooterProps,
|
FooterProps,
|
||||||
FooterItemActiveKey
|
FooterItemActiveKey
|
||||||
} from '@/entities/common/model/types';
|
} from '@/entities/common/model/types';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
export const FooterNavigation = ({
|
export const FooterNavigation = ({
|
||||||
setMenuOn,
|
setMenuOn,
|
||||||
footerCurrentPage
|
footerCurrentPage
|
||||||
}: FooterProps) => {
|
}: FooterProps) => {
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
const [isFooterOn, setIsFooterOn] = useState<boolean>(false);
|
||||||
|
|
||||||
const onClickToNavigate = (path?: string) => {
|
const onClickToNavigate = (path?: string) => {
|
||||||
if(!!path){
|
if(!!path){
|
||||||
@@ -91,11 +93,30 @@ export const FooterNavigation = ({
|
|||||||
return rs;
|
return rs;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
if(window.scrollY > window.outerHeight / 3){
|
||||||
|
setIsFooterOn(true);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
setIsFooterOn(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<nav className="bottom-tabbar">
|
{ isFooterOn &&
|
||||||
{ getFooterButtonItems() }
|
<nav className="bottom-tabbar">
|
||||||
</nav>
|
{ getFooterButtonItems() }
|
||||||
|
</nav>
|
||||||
|
}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user