使用slideToggle（）固定位置以將內容下推

Question

我想在頁面頂部有一個固定的欄，懸停時顯示一個子欄。 我希望此子欄在發生這種情況時將頁面的其余部分向下推。

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>

Answer 1

您還應該給頁邊距，並將位置div固定在頁面上方。

工作演示

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 ，如果您覺得這是錯誤的，請發表評論。

Answer 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>

使用slideToggle（）固定位置以將內容下推

問題描述

2 個解決方案

解決方案1
0 已采納

解決方案2
0 2013-12-30 05:47:08

使用slideToggle（）固定位置以將內容下推

問題描述

2 個解決方案

解決方案1 0 已采納

解決方案2 0 2013-12-30 05:47:08

解決方案1
0 已采納

解決方案2
0 2013-12-30 05:47:08