我试图在LeftNav中创建一个固定标题(在本例中为工具栏),这样当LeftNav滚动时,工具栏会保持其位置。但不知何故,将postion: 'fixed'
应用于工具栏似乎无法在LeftNav中运行。当LeftNav中的内容超过窗口高度时,整个LeftNav(包括位于fixed
位置的顶部工具栏)会滚动。有没有人想出如何在LeftNav中创建一个固定的位置元素?
以下是供参考的代码:
...
const toolBarStyle = {
position: 'fixed',
top: 0,
};
return (
<LeftNav
open={open}
docked={false}
onRequestChange={onRequestChange}
>
<Toolbar style={toolBarStyle}> />
{this.props.children} // children could be a lot of content
</LeftNav>
);
...
答案 0 :(得分:1)
好的,我明白了。我所做的只是将LeftNav
本身设置为position: 'fixed'
,并在内容周围添加了一个包装div并设置overflowY: 'auto'
。这是代码:
......
render() {
const toolBarStyle = {
position: 'absolute',
top: 0,
};
const containerStyle = {
position: 'fixed',
top: 0,
overflowY: 'hidden',
};
const contentContainerStyle = {
marginTop: 57, // the same height as the toolbar
width: '100%',
// you can obtain the window height whatever way you want.
// I was using Redux so I pass it down from parent component as a prop
height: this.props.windowSize.height - 57,
overflowY: 'auto',
};
return (
<LeftNav
style={containerStyle}
docked={false}
onRequestChange={onRequestChange}
>
<Toolbar style={toolBarStyle} />
<div style={contentContainerStyle}>
{this.props.children}
</div>
</LeftNav>
);
...