Matière-tiroir de l'interface utilisateur numéro

Question

Je veux que ce tiroir colle à la page comme un autocollant et soit actif. Tout va bien mais chaque fois que je défile, tout le tiroir descend aussi. Comment puis-je le réparer? Je ne veux pas que tout cela bouge en faisant défiler.

Note: J'ai essayé de résoudre ce problème en utilisant docked = {false}. Mais l'utiliser rend la page entière inactive sauf le tiroir.

Vous avez rencontré le même problème? Toute solution?

import React, { Component } from 'react'; 
import Drawer from 'material-ui/Drawer'; 
import MenuItem from 'material-ui/MenuItem'; 

class MenuView extends Component { 
render { 
    return(
    <Drawer open={true} containerStyle={{marginTop: '6.5%', background:'#545454', position:'fixed'}}> 
    <MenuItem primaryText="My Name" style={{color:'white', marginTop:'10%'}} href="#/name" onClick={handlers.changeURL}/> 
    <MenuItem primaryText="My Age" style={{color:'white'}} href="#/age" onClick={handlers.changeURL}/> 
    <MenuItem primaryText="My Address" style={{color:'white'}} href="#/address" onClick={handlers.changeURL}/> 
    <MenuItem primaryText="My Files" style={{color:'white'}} href="#/files" onClick={handlers.changeURL}/> 
    </Drawer> 
); 
} 
} 
export default MenuView; 

Answer 1

peut vous créer un jsFiddle pour cela pour que nous puissions avoir un regard sur elle. OU Essayez d'ajouter la propriété "Top" de css dans containerStyle.

<Drawer open={true} containerStyle={{top: '0%', background:'#545454', position:'fixed'}}> 
 
    <MenuItem primaryText="My Name" style={{color:'white', marginTop:'10%'}} href="#/name" onClick={handlers.changeURL}/> 
 
    <MenuItem primaryText="My Age" style={{color:'white'}} href="#/age" onClick={handlers.changeURL}/> 
 
    <MenuItem primaryText="My Address" style={{color:'white'}} href="#/address" onClick={handlers.changeURL}/> 
 
    <MenuItem primaryText="My Files" style={{color:'white'}} href="#/files" onClick={handlers.changeURL}/> 
 
</Drawer>