Is it possible to hide only the upper part of the nav-bar, similar to the behavior in WhatsApp? I am using material-ui for this particular use-case. Currently, my implementation causes the app-bar to extend only when the scroll position is less than 48px, unlike the behavior shown in the .gif below where it extends on every scroll up event. It seems like the app-bar scrolls first until it reaches a fixed position, after which the rest of the content begins to scroll.
Edit
I tried implementing a proof-of-concept but it doesn't work as expected: stackblitz
This is how my approach looks:
export default function TabBar() {
const [value, setValue] = React.useState(0);
const [yOffset, setYOffset] = React.useState(0);
function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
setValue(newValue);
}
function transitionY() {
const transitionYthreshold = 48;
return Math.min(transitionYthreshold, yOffset);
}
useEffect(() => {
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
});
function handleScroll() {
setYOffset(window.pageYOffset);
}
return (
<React.Fragment>
<AppBar
position="sticky"
color="default"
style={{
transition: 'all 0.1s',
transform: `translateY(-${transitionY()}px)`
}}
>
<Toolbar style={{ minHeight: '48px' }}>
<div style={{ width: '30px', marginRight: '1em' }} />
<span style={{ fontWeight: 'bold', fontSize: '20px', verticalAlign: 'super' }}>Help-Educate</span>
</Toolbar>
<Tabs
value={value}
onChange={handleChange}
indicatorColor="primary"
textColor="primary"
variant="fullWidth"
>
<Tab label="Home" {...a11yProps(0)}/>
<Tab label="Donations" {...a11yProps(1)}/>
<Tab label="About Us" {...a11yProps(2)}/>
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<Container>
{**SomeSuperLongText**}
</Container>
</TabPanel>
<TabPanel value={value} index={1}>
{**SomeSuperLongText**}
</TabPanel>
<TabPanel value={value} index={2}>
{**SomeSuperLongText**}
</TabPanel>
</React.Fragment>
);
}
A gif showcasing the desired behavior can be found here: dropbox-link