固定標題內material-ui LeftNav

我試圖在LeftNav內創建一個固定的標題（在這種情況下，一個工具欄），以便當LeftNav滾動時，工具欄停留在其位置。但以某種方式將postion: 'fixed'應用於工具欄在LeftNav中似乎不起作用。當LeftNav中的內容大於窗口高度時，整個LeftNav，包括位於頂部的具有fixed位置的工具欄會滾動。有沒有人想過如何在LeftNav中創建一個固定的位置元素？固定標題內material-ui 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> 
); 
...

來源

2016-03-19 realbug

嘗試'position：fixed;' –

對不起，這是一個錯字。我的意思是「固定」而不是「絕對」。我在問題中糾正了它。 – realbug

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

來源

2016-03-24 17:07:14 realbug

固定標題內material-ui LeftNav

回答

相關問題