Material-UI Drawer issue

Question

I want this drawer to stick with the page just like a sticker and be active. Everythings fine but whenever I am scrolling down, the whole drawer also moves down. How can I fix it? I don't want this whole thing to move down while scrolling.

Note: I tried to fix this thing by using docked={false}. But using it there makes the whole page inactive except the drawer.

Encountered the same problem? Any 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

can you create a jsfiddle for this so that we may have a look on it. OR Try adding "Top" property of css inside 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>