title: How to make AppBar hide and appear on scroll when it is inside a div?
body: <p>I have a <strong>AppBar inside a div</strong> that I want to hide on scroll down and appear back in scroll up.</p>
  
  <p><a href="https://i.stack.imgur.com/WF5Jb.png" rel="nofollow noreferrer">https://i.stack.imgur.com/WF5Jb.png</a></p>
  
  <p>Here is my take, using <a href="https://material-ui.com/components/app-bar/#hide-app-bar" rel="nofollow noreferrer">https://material-ui.com/components/app-bar/#hide-app-bar</a></p>
  
  <pre><code>export default function HideAppBar(props) {
    return (
      &lt;React.Fragment&gt;
        &lt;div style={{ height: "100px", width: "100px", overflow: "auto" }}&gt;
          {" "}
          External content
        &lt;/div&gt;
        &lt;CssBaseline /&gt;
        &lt;div style={{ height: "400px", width: "300px", overflow: "auto" }}&gt;
          &lt;HideOnScroll {...props}&gt;
            &lt;AppBar style={{ position: "inherit" }}&gt;
              &lt;Toolbar&gt;
                &lt;Typography variant="h6"&gt;Scroll to Hide App Bar&lt;/Typography&gt;
              &lt;/Toolbar&gt;
            &lt;/AppBar&gt;
          &lt;/HideOnScroll&gt;
  
          &lt;Toolbar /&gt;
          &lt;Container&gt;
            &lt;Box my={2}&gt;
              {[...new Array(12)]
                .map(
                  () =&gt; `Cras mattis consectetur purus sit amet fermentum.
  Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
                )
                .join("\n")}
            &lt;/Box&gt;
          &lt;/Container&gt;
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/material-demo-d0p7p?file=/demo.js:0-2169" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-d0p7p?file=/demo.js:0-2169</a></p>
  
  <p>When you scroll up, the AppBar doesn't show again, unless you go all the way back to the top.</p>