javascript - Header not staying in place -

i've positioned header of page @ top using

  position:fixed; 

this works fine, not on chrome on android devices. header get's pushed away , placed shouldn't be: few 100 pixels top instead of 0 pixels top.

my guess it's caused because of javascript i'm using. first piece of javascript when user presses icon menu shows up, code:

 <script type="text/javascript">     $(document).ready(function() {         $('#toggle').click(function(){             $('div.showhide').toggle();          });     }); </script> 

the second code when user scrolls away header header closes:

    <script type='text/javascript'>//<![cdata[        $(window).load(function(){       $(window).scroll(function() {   $('.showhide').fadeout("fast");       });       });//]]>       </script> 

this page code:

<div class="showhide">     <div class="menubg">         <div class="menu">             <div class="container">                 <div class="item">                     <div class="img">                         <a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;"  src="img/conversations.png" alt="conversations" />                     </div>                     <p>gesprekken</a></p>                 </div>                 <div class="item">                     <div class="img">                         <a href="home.cfm" style="color: white; text-decoration: none;">            <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />                     </div>                     <p>vrienden</a></p>                 </div>                 <div class="item">                     <div class="img">                         <a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />                     </div>                     <p>ik</a></p>                 </div>                 <div class="clear"></div>                 <div class="item">                     <div class="img">                         <img src="img/hc.gif" alt="reception" />                     </div>                     <p>receptie</p>                 </div>                 <div class="item">                     <div class="img">                             <a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />                     </div>                     <p>instellingen</p></a>                 </div>             </div>         </div>     </div> </div>  <div class="headbg">     <div class="header">         <a href="#">             <img src="img/conversations.png" alt="conversations" class="nav left" />         </a>         <a href="#">             <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />         </a>         <a href="#">             <img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />         </a>     </div> </div>   <div class="content">    </div>    // page continues after isn't causing problem 

forgot add it, css code:

.menubg { width: 100%; background-color: #201d19; }   .menu { width: 320px; height: 190px; margin: 0 auto; overflow: hidden;    }   .showhide { display: none;    }   .container { width: 290px; height: 160px; background-color: #201c18; border: 1px solid #282420; border-radius: 5px; position: absolute; padding: 5px; margin: 10px;    }    // not css, if it's needed i'll add 

if me out problem appreciate it!

i've created sample fiddle header , content div.

#header { position:fixed; ...     top:0;     left:0; } #content { margin-top:set header height; }