How can I keep the material-ui AppBar fixed at top if it's wrapped together with page contents in a transition? Obviously, I'd like the AppBar to transition (e.g. Zoom or Slide) in with the rest of the page contents.

I first discovered this when trying to use the material-ui Dialog ponent in fullScreen mode. If the page contents has height enough to create a scrollbar, the AppBar in the Dialog scrolls off the page, even if it's position is set to fixed.

To reproduce issue, go here () and click the OPEN FULLSCREEN DIALOG button, and then scroll down. Or alternatively go here () and scroll down. How do I fix the AppBar at top instead of scrolling?

One possible workaround would be to conditionally render an AppBar for the duration of the transition, but then hide that one and show one outside the transition after the transition has pleted. But that seems like a hack.

I'd be happy to use an npm module that handles nice page transitions.

I found one attempt with a pre-v1 version of Material-Ui here (), but I'd like something tha works with > v1, if possible.

Also this looks nice, but it says it does not fully support React Router v4. (although maybe it supports it well enough )

See also

How can I keep the material-ui AppBar fixed at top if it's wrapped together with page contents in a transition? Obviously, I'd like the AppBar to transition (e.g. Zoom or Slide) in with the rest of the page contents.

I first discovered this when trying to use the material-ui Dialog ponent in fullScreen mode. If the page contents has height enough to create a scrollbar, the AppBar in the Dialog scrolls off the page, even if it's position is set to fixed.

To reproduce issue, go here (https://codesandbox.io/s/2471jyxxkr) and click the OPEN FULLSCREEN DIALOG button, and then scroll down. Or alternatively go here (https://codesandbox.io/s/lrxv6w43y9) and scroll down. How do I fix the AppBar at top instead of scrolling?

One possible workaround would be to conditionally render an AppBar for the duration of the transition, but then hide that one and show one outside the transition after the transition has pleted. But that seems like a hack.

I'd be happy to use an npm module that handles nice page transitions.

I found one attempt with a pre-v1 version of Material-Ui here (https://www.npmjs./package/material-ui-fullscreen-dialog-transition-fix), but I'd like something tha works with > v1, if possible.

Also this looks nice, but it says it does not fully support React Router v4. https://github./trungdq88/react-router-page-transition (although maybe it supports it well enough https://github./trungdq88/react-router-page-transition#using-with-react-router-4)

See also https://github./mui-org/material-ui/issues/12096

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow edited Jul 10, 2018 at 16:42 peterh 1 asked Jul 10, 2018 at 16:40 Eric PyleEric Pyle 1111 silver badge22 bronze badges 4

• you can use react-sticky-box to make any ponent stick to the top of the page – Guillaume Commented Jul 10, 2018 at 16:59
• If what you want to do is to have the inner content of the page change when the route is changed but the top bar be fixed, you can just have a router for the inner content instead of the whole app – Guillaume Commented Jul 10, 2018 at 17:01
• @Guillaume Thanks for the "sticky" suggestion. I did manage to use the native material-ui position="sticky" setting successfully in the context of separate page in my react electron app. I haven't had time to fiddle with that same suggestion in a dialog box (or the router suggestions) – Eric Pyle Commented Aug 14, 2018 at 21:58
• A bit off topic, but do anyone know if it is possible to use the material ui <Fade> to animate react-router transitions? Instead of having to install a third library just for those animations. – Rasmus Puls Commented Nov 13, 2019 at 16:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You can use react-router to address this scenario:

as an example:

<BrowserRouter>
 <div className={classes.root}>
  <AppBar position="static" color="default">
    <Tabs
      value={this.state.value}
      onChange={this.handleChange}
      indicatorColor="primary"
      textColor="primary"
      fullWidth
    >
      <Tab label="Item One" ponent={Link} to="/one" />
      <Tab label="Item Two" ponent={Link} to="/two" />
    </Tabs>
  </AppBar>

  <Switch>
    <Route path="/one" ponent={PageShell(ItemOne)} />
    <Route path="/two" ponent={PageShell(ItemTwo)} />
  </Switch>
</div>

here appbar is fixed on top and other pages are changed as you try to route.

I have used react-addons-css-transition-group for transitions with routes and it is described in this article: https://blog.logrocket./routes-animation-transitions-in-react-router-v4-9f4788deb964

please find the animation index.css file in demo

I wrapped pages from a HOC to make routing easier ( PageShell ponet)

here is a working example:https://codesandbox.io/s/04p1v46qww

hope this is what you are looking for.