固定 header 在 material-ui 内

Question

我试图在 LeftNav 中创建一个固定的 header（在本例中为工具栏），以便当 LeftNav 滚动时，工具栏保持在其位置。但是以某种方式将 postion: 'fixed' 应用于工具栏似乎在 LeftNav 中不起作用。当 LeftNav 中的内容超过 window 高度时，整个 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>
);
...

Answer 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>
);
...

固定 header 在 material-ui 内

fixed header within material-ui LeftNav

css

material-ui