🐛 bug: fix header animation

:%s
This commit is contained in:
lytrankieio123
2021-09-10 11:37:17 +07:00
parent 14dd99c051
commit e6d8d42ede
3 changed files with 54 additions and 46 deletions

View File

@@ -1,10 +1,14 @@
@import "../../../styles/utilities"; @import "../../../styles/utilities";
.header { .header {
@apply sticky bg-white shadow-md; @apply sticky bg-white;
top: 0; top: 0;
left: 0;
z-index: 9999; z-index: 9999;
margin-bottom: 3.2rem; margin-bottom: 3.2rem;
@screen md {
@apply relative;
}
&.full { &.full {
@apply shadow-none; @apply shadow-none;
border: 1px solid var(--border-line); border: 1px solid var(--border-line);
@@ -19,20 +23,25 @@
} }
.headerSticky { .headerSticky {
position: sticky; @apply sticky bg-white shadow-md;
top: 0;
display: none; display: none;
padding-left: 3.2rem;
padding-right: 3.2rem;
top: 0;
left: 0;
z-index: 10000;
transition: all 0.2s;
&.show { &.show {
display: block; display: block;
animation: showHeaderSticky 0.2s;
} }
} }
// @keyframes showHeaderHightlight { @keyframes showHeaderSticky {
// 0% { 0% {
// transform: translateY(-4rem); transform: translateY(-7rem);
// } }
// 100% { 100% {
// transform: none; transform: none;
// } }
// } }

View File

@@ -19,7 +19,7 @@ const Header = memo(() => {
const headerHeight = useMemo(() => { const headerHeight = useMemo(() => {
return headeFullRef.current?.offsetHeight return headeFullRef.current?.offsetHeight
}, [headeFullRef]) }, [headeFullRef.current])
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
@@ -42,15 +42,18 @@ const Header = memo(() => {
<header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}> <header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
<HeaderHighLight /> <HeaderHighLight />
<div className={s.menu}> <div className={s.menu}>
<HeaderMenu isFull={isFullHeader} <HeaderMenu
isFull={isFullHeader}
openModalAuthen={openModalAuthen} openModalAuthen={openModalAuthen}
openModalInfo={openModalInfo} /> openModalInfo={openModalInfo} />
<HeaderSubMenu /> <HeaderSubMenu />
</div> </div>
</header> </header>
<div className={classNames({ <div className={classNames({
headerSticky: true, [s.headerSticky]: true,
show: !isFullHeader [s.show]: !isFullHeader
})}> })}>
<HeaderMenu isFull={isFullHeader} <HeaderMenu isFull={isFullHeader}
openModalAuthen={openModalAuthen} openModalAuthen={openModalAuthen}

View File

@@ -3,9 +3,6 @@
.headerSubMenu { .headerSubMenu {
@apply hidden; @apply hidden;
@screen md { @screen md {
transform: translateY(-10rem);
height: 0;
&.show {
@apply block; @apply block;
padding-bottom: 2.4rem; padding-bottom: 2.4rem;
transform: none; transform: none;
@@ -39,4 +36,3 @@
} }
} }
} }
}