Position fixed with slideToggle() to push content down

Question

I want to have a fixed bar at the top of my page, that on hover shows a sub-bar. I want this sub-bar to push the rest of the page down when this happens.

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;
}

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");
  });
});
</script>

<body>

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

Position the bar differently, as in don't use position fixed. — adeneo, Dec 30 '13 at 05:28
What would be another way to make it stick to the top on scroll..? — Wonjunnn, Dec 30 '13 at 05:46
There are many ways, but I'd go for Surjith's answer below, seems easiest — adeneo, Dec 30 '13 at 05:50

score 0 · Accepted Answer · answered Dec 30 '13 at 05:43

You should also give the margin to the page and put the position fixed div above the page.

Working Demo

Jquery

$(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")
    $("#panel").stop().slideToggle("slow");
  });
});

I'm not sure about the slideToggle, Please comment if you feel this is wrong.

nice, I just thought of this answer too but I don't have enough rep to answer my own question. But I'm not sure if this is the cleanest way to do it — Wonjunnn, Dec 30 '13 at 05:45

NiksD · Answer 2 · 2013-12-30T05:52:13.483

try this... (You can test this http://jsfiddle.net/b6rkb/28/)

 <style> <!-- Add to style -->
     #page{
     height:200px;
     display:none;
     opacity: 0;
     }
 </style>
 <script> 
 $(document).ready(function(){
 $("#flip").hover(function(){
 $("#panel").stop().slideToggle("slow");
 $("#page").stop().slideToggle("slow"); //Add this line
 });
 });
 </script>
 <body><div class="page">
    <div class="fixed">
        <div id="flip">Click to slide the panel down or up</div>
        <div id="panel">Hello world!</div>
    </div>
    <br><br><br>

    <div id="page"> <!-- Add this div -->
    test
       </div>
       sup
 </div></body>

Position fixed with slideToggle() to push content down

2 Answers2