我想在我的页面顶部有一个固定的栏，悬停时显示一个子栏。当发生这种情况时，我希望此子栏将页面的其余部分向下推。
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>
最佳答案
还应该给页面留边距，把位置固定的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，如果您认为这是错误的，请发表评论。
关于javascript - 使用 slideToggle() 固定位置以将内容向下推，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20833827/