Within my app file, I have customized components like an appbar and various page elements:
const styles = theme => ({
appBar: {
width:'100%',
},
});
class App extends Component {
render() {
const {classes} = this.props;
return (
<React.Fragment>
<CssBaseline />
<AppBar position="sticky" className={classes.appBar} />
<Page1 show={someCondition} />
<Page2 show={someCondition} />
.
.
<Page99 show={someCondition} />
</React.Fragment>
);
}
}
The appbar is set to remain sticky always visible at the top. Every page component contains a button located at the top of that specific page:
const styles = theme => ({
button: {
width:'100%',
},
});
class Page99 extends Component {
render() {
const {classes} = this.props;
return (
<React.Fragment>
<div>
<Button variant="contained" className= {classes.button}>
Action Button
</Button>
</div>
{/* Some other stuff */>
</React.Fragment>
);
}
}
I am now attempting to keep this button fixed directly under the appbar. As the user scrolls down, I want the button to stay in place just like the appbar does. I attempted to apply sticky positioning, hoping it would align below the appbar, but it did not work as expected. The dynamic nature of the appbar makes it challenging to predict its exact height, so fixed positioning won't suffice across different resolutions.