Fixed position relative to page flow

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").hover(function(){
    $("#panel").stop().slideToggle("slow");
    $(".page").stop().animate({"margin-top":"120px"}, "slow")
    }, function() {
    $(".page").stop().animate({"margin-top":"0"}, "slow");
  });
});
</script>

<body>
  <div class="fixed">
            <div id="flip">Click to slide the panel down or up</div>
            <div id="panel">Hello world!</div>
        </div>
<div class="page">
      
        <br><br><br>
        sup
</div>

CSS

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
.page{
    height:5000px;
}
.fixed{
    position: fixed;
    top:0;
}