Css 物料ui LeftNav中的固定标题

我试图在LeftNav中创建一个固定的标题（在本例中，是一个工具栏），以便当LeftNav滚动时，工具栏保持在它的位置。但是在LeftNav中，将

position:“fixed”

应用到工具栏似乎不起作用。当LeftNav中的内容超过窗口高度时，整个LeftNav（包括顶部带有

固定位置的工具栏）将滚动。有人知道如何在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，
};
返回(
/>
{this.props.children}//孩子们可能有很多内容
);
...
好的，我想出来了。我所做的只是将
LeftNav
本身设置为
位置：“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>
);
...

。。。。。。
render（）{
常量工具栏样式={
位置：'绝对'，
排名：0，
};
常量集装箱样式={
位置：'固定'，
排名：0，
溢出：“隐藏”，
};
常量contentContainerStyle={
marginTop:57，//与工具栏的高度相同
宽度：“100%”，
//您可以通过任何方式获得窗口高度。
//我在使用Redux，所以我将它作为道具从父组件传递下来
高度：this.props.windowSize.height-57，
溢出：“自动”，
};
返回(
{this.props.children}
);
...
试试
位置：fixed；
对不起，这是一个打字错误。我的意思是
fixed
不是
绝对的
。我已经在问题中更正了它。