Fixed header class on scroll

This commit is contained in:
kvakazyambra 2022-09-29 23:10:00 +03:00
parent eeeb8f2271
commit 998f11215b
2 changed files with 7 additions and 6 deletions

View File

@ -138,10 +138,6 @@
@include media-breakpoint-down(sm) {
padding: divide($container-padding-x, 2);
}
.header--scrolled-bottom & {
opacity: 0;
}
}
&.fixed {
@ -170,6 +166,10 @@
}
}
.headerScrolledBottom .mainNavigation {
opacity: 0;
}
.burgerContainer {
box-sizing: content-box;
display: inline-flex;

View File

@ -75,6 +75,7 @@ export const Header = (props: Props) => {
setIsScrollingBottom(window.scrollY > scrollTop)
setIsScrolled(window.scrollY > 0)
scrollTop = window.scrollY
window.console.log(getIsScrollingBottom() && getIsScrolled())
}
window.addEventListener('scroll', handleScroll, { passive: true })
@ -88,8 +89,8 @@ export const Header = (props: Props) => {
class={styles.mainHeader}
classList={{
[styles.headerFixed]: props.isHeaderFixed,
['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
[styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(),
[styles.headerScrolledBottom]: getIsScrollingBottom() && getIsScrolled()
}}
>
<Modal name="auth">