discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Fixed header class on scroll

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Nav/Header.module.scss
View File

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

5
src/components/Nav/Header.tsx
View File

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