Fixed header class on scroll
This commit is contained in:
parent
eeeb8f2271
commit
998f11215b
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue
Block a user