Search code examples
javascriptreactjsmaterial-uiappbar

How to make AppBar component from material-ui-next react to scroll events


As per Material Design guidelines:

Upon scrolling, the top app bar can […] transform in the following ways:
- Scrolling upward hides the top app bar
- Scrolling downward reveals the top app bar
When the top app bar scrolls, its elevation above other elements becomes apparent.

Is there any built-in approach to do this in material-ui-next or should it be considered as a new feature? Can you give a hint on how to achieve the animation of the AppBar component as described in the guidelines?


Solution

  • For those who are still looking for built-in feature, Hide appbar on scroll is available in material-ui.