ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove reliance on intersection observer

This commit is contained in:
keyan 2024-04-04 15:37:51 -05:00
parent a785f907cb
commit 2bf11dc848
2 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/nav/mobile/footer.module.css
View File

@ -6,6 +6,7 @@
background-color: var(--bs-body-bg); background-color: var(--bs-body-bg);
border-top: 1px solid var(--theme-toolbarActive); border-top: 1px solid var(--theme-toolbarActive);
z-index: 1000; z-index: 1000;
justify-content: end;
} }
.footerPadding { .footerPadding {

77
components/nav/sticky-bar.js
View File

@ -7,51 +7,52 @@ import classNames from 'classnames'
export default function StickyBar ({ prefix, sub, path, topNavKey, dropNavKey }) { export default function StickyBar ({ prefix, sub, path, topNavKey, dropNavKey }) {
const ref = useRef() const ref = useRef()
const sticky = useRef()
const me = useMe() const me = useMe()
useEffect(() => { useEffect(() => {
const observer = new window.IntersectionObserver(([entry]) => { const stick = () => {
sticky?.current?.classList.toggle(styles.hide, entry.isIntersecting) if (window.scrollY > 100) {
}) ref.current?.classList.remove(styles.hide)
ref?.current && observer.observe(ref.current) } else {
ref.current?.classList.add(styles.hide)
}
}
window.addEventListener('scroll', stick)
return () => { return () => {
ref?.current && observer.unobserve(ref.current) window.removeEventListener('scroll', stick)
} }
}, [ref?.current, sticky?.current]) }, [ref?.current])
return ( return (
<> <div className={classNames(styles.hide, styles.sticky)} ref={ref}>
<div ref={ref} style={{ position: 'relative', top: '50px' }} /> <Container className='px-0 d-none d-md-block'>
<div className={classNames(styles.hide, styles.sticky)} ref={sticky}> <Navbar className='py-0'>
<Container className='px-0 d-none d-md-block'> <Nav
<Navbar className='py-0'> className={styles.navbarNav}
<Nav activeKey={topNavKey}
className={styles.navbarNav} >
activeKey={topNavKey} <Back />
> <Brand className='me-1' />
<Back /> <SearchItem className='me-0 ms-2' />
<Brand className='me-1' /> <NavPrice />
<SearchItem className='me-0 ms-2' /> {me ? <MeCorner dropNavKey={dropNavKey} me={me} className='d-flex' /> : <AnonCorner path={path} className='d-flex' />}
<NavPrice /> </Nav>
{me ? <MeCorner dropNavKey={dropNavKey} me={me} className='d-flex' /> : <AnonCorner path={path} className='d-flex' />} </Navbar>
</Nav> </Container>
</Navbar> <Container className='px-sm-0 d-block d-md-none'>
</Container> <Navbar className='py-0'>
<Container className='px-sm-0 d-block d-md-none'> <Nav
<Navbar className='py-0'> className={classNames(styles.navbarNav, 'justify-content-between')}
<Nav activeKey={topNavKey}
className={classNames(styles.navbarNav, 'justify-content-between')} >
activeKey={topNavKey} <Back />
> <NavPrice className='flex-shrink-1 flex-grow-0' />
<Back /> {me ? <NavWalletSummary className='px-2' /> : <SignUpButton />}
<NavPrice className='flex-shrink-1 flex-grow-0' /> </Nav>
{me ? <NavWalletSummary className='px-2' /> : <SignUpButton />} </Navbar>
</Nav> </Container>
</Navbar> </div>
</Container>
</div>
</>
) )
} }