title: CSS/HTML - Scroll Header before content
body: <p>I try to figure out if it is possible to hide only the upper part of the nav-bar. See Img below (green marked area). This should mimic the navbar behaviour like the whatsapp-app.</p>
  
  <p>I am using <strong>material-ui</strong> for this use-case. With my implementation the app-bar only extends again if the <strong>scroll position is &lt; 48px</strong>. On the .gif-file (see below) it extends on every scroll up event. It also looks like the app-bar scrolls only first until it reaches position fixed. After then the rest of the content begins to scroll.</p>
  
  <h1>Edit</h1>
  
  <p>I implemented a proof-of-concept, but it is not quite working as expected: <a href="https://stackblitz.com/edit/react-ts-krptpp" rel="nofollow noreferrer"><strong>stackblitz</strong></a></p>
  
  <p>My approach looks as follows:</p>
  
  <pre><code>export default function TabBar() {
    const [value, setValue] = React.useState(0);
    const [yOffset, setYOffset] = React.useState(0);
  
    function handleChange(event: React.ChangeEvent&lt;{}&gt;, newValue: number) {
      setValue(newValue);
    }
  
    function transitionY() {
      const transitionYthreshold = 48;
      return Math.min(transitionYthreshold, yOffset);
    }
  
    useEffect(() =&gt; {
      window.addEventListener('scroll', handleScroll, { passive: true });
      return () =&gt; window.removeEventListener('scroll', handleScroll);
    });
  
    function handleScroll() {
      setYOffset(window.pageYOffset);
    }
  
    return (
      &lt;React.Fragment&gt;
        &lt;AppBar
          position="sticky"
          color="default"
          style={{
            transition: 'all 0.1s',
            transform: `translateY(-${transitionY()}px)`
          }}
        &gt;
          &lt;Toolbar style={{ minHeight: '48px' }}&gt;
            &lt;div style={{ width: '30px', marginRight: '1em' }} /&gt;
            &lt;span style={{ fontWeight: 'bold', fontSize: '20px', verticalAlign: 'super' }}&gt;Help-Educate&lt;/span&gt;
          &lt;/Toolbar&gt;
          &lt;Tabs
            value={value}
            onChange={handleChange}
            indicatorColor="primary"
            textColor="primary"
            variant="fullWidth"
          &gt;
            &lt;Tab label="Home"  {...a11yProps(0)}/&gt;
            &lt;Tab label="Donations"  {...a11yProps(1)}/&gt;
            &lt;Tab label="About Us"  {...a11yProps(2)}/&gt;
          &lt;/Tabs&gt;
        &lt;/AppBar&gt;
        &lt;TabPanel value={value} index={0}&gt;
          &lt;Container&gt;
            {**SomeSuperLongText**}
          &lt;/Container&gt;
        &lt;/TabPanel&gt;
        &lt;TabPanel value={value} index={1}&gt;
           {**SomeSuperLongText**}
        &lt;/TabPanel&gt;
        &lt;TabPanel value={value} index={2}&gt;
           {**SomeSuperLongText**}
        &lt;/TabPanel&gt;
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>
  
  <p>I created a gif how the behaviour should look like:
  <a href="https://www.dropbox.com/s/vonsmvn4bs4obi8/ezgif.com-gif-maker.gif?dl=0" rel="nofollow noreferrer"><strong>dropbox-link</strong></a></p>
  
  <p><a href="https://i.stack.imgur.com/YFjIA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YFjIA.png" alt="enter image description here"></a></p>