使用 slideToggle() 固定位置以将内容向下推答案

【问题标题】：Position fixed with slideToggle() to push content down使用 slideToggle() 固定位置以将内容向下推
【发布时间】：2013-12-30 13:52:13
【问题描述】：

http://jsfiddle.net/b6rkb/18/

我想在页面顶部有一个固定栏，悬停时会显示一个子栏。我希望这个子栏在发生这种情况时将页面的其余部分向下推。

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>

【问题讨论】：

以不同的方式定位栏，如不要使用固定位置。
还有什么方法可以让它粘在滚动条的顶部..？
有很多方法，但我会在下面寻求 Surjith 的答案，似乎最简单

标签： javascript jquery html css

【解决方案1】：

你还应该给页面留出边距，并将位置固定的div放在页面上方。

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

我不确定slideToggle，如果您认为这是错误的，请发表评论。

【讨论】：

很好，我也只是想到了这个答案，但我没有足够的代表来回答我自己的问题。但我不确定这是否是最干净的方法

【解决方案2】：

试试这个...（你可以测试这个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>

【讨论】：