Material-ui内の固定ヘッダーLeftNav

Question

LeftNav内で固定ヘッダー（この場合はツールバー）を作成しようとしていたため、LeftNavがスクロールしたときにツールバーがその位置にとどまるようにしました。しかし、何らかの形でツールバーにpostion: 'fixed'を適用しても、LeftNavでは機能しないようです。 LeftNav内のコンテンツがウィンドウの高さを超えると、上部ツールバー（fixed位置）を含む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> 
); 
... 

Answer 1

OK、私はそれを考え出しました。私がしたのは、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> 
); 
...