如何自动隐藏我的 Reactjs <AppBar/>
如图1滚动时的组件?
<AppBar/>
滚动时自动隐藏
I am using Material-UI and my code is as follows.
MyAppBar.jsimport React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" className={classes.grow}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ButtonAppBar);
最佳答案
您可以使用 Slide
结合useScrollTrigger
这里的要点是,useScrollTrigger
将(默认情况下)在您向下滚动并且窗口垂直滚动条位置达到某个阈值(100
默认情况下离原点的像素) - 当你向上滚动时它返回 false
。因此,这就是我们在 Slide
in
属性上否定它的原因
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>
...
</>
);
}
您可以使用我在此答案顶部提供的与 useScrollTrigger
相关的链接来自定义选项,例如 threshold
关于reactjs - 使用 Reactjs Material-UI 滚动时如何自动隐藏 AppBar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54386958/