fixed header innerhalb von material-ui LeftNav

Question

Ich habe versucht, eine feste Kopfzeile (in diesem Fall eine Symbolleiste) innerhalb einer LeftNav zu erstellen, so dass die Toolbar bei der LeftNav in seiner Position bleibt. Aber die Anwendung von postion: 'fixed' auf die Toolbar scheint in LeftNav nicht zu funktionieren. Wenn der Inhalt in LeftNav mehr als die Fensterhöhe beträgt, scrollt der gesamte LeftNav, einschließlich der oberen Symbolleiste mit der Position fixed. Hat jemand herausgefunden, wie man ein Fixed-Position-Element in einem LeftNav erstellt? Hier

ist der Code als Referenz:

... 
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

OK, ich habe es herausgefunden. Alles, was ich tat, war die LeftNav selbst auf position: 'fixed', und fügte ein Wrapper div um den Inhalt und setzen overflowY: 'auto'. Hier ist der Code:

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