hide appbar on scroll mui

Njoroge Brian answered on March 22, 2023 Popularity 8/10 Helpfulness 4/10

answer hide appbar on scroll mui

hide appbar on scroll mui

Comment

You can use Slide in conjuction with useScrollTrigger

The gist here is, useScrollTrigger will (by default) return true when you scroll down and the window vertical scrollbar position hits a certain threshold (100 pixels from origin by default) - when you scroll back up it returns false. Hence, these are the reasons why we negate it on the in prop of Slide

export default function HideAppBar() {
  const trigger = useScrollTrigger();

  return (
    <>        
      <Slide appear={false} direction="down" in={!trigger}>
        <AppBar>
          <Toolbar>
            <Typography variant="h6">Scroll Down to Hide App Bar</Typography>
          </Toolbar>
        </AppBar>
      </Slide>    
      ...
    </>
  );
}

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: appbar hide javascript mui scroll

Link to this answer
Share Copy Link

Contributed on Mar 22 2023

Njoroge Brian

0 Answers Avg Quality 2/10

hide appbar on scroll mui

Contents

More Related Answers

hide appbar on scroll mui

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.