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

您还应该为页面提供边距，并将位置固定在页面上方。

<强> 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，如果您认为这是错误请发表评论。

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 个答案: