jQuery 在不向下推内容的情况下使 div 向下滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6037317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make a div slide down without pushing content down
提问by user645607
回答by James Montagne
Do you mean sort of like this?
你的意思是像这样吗？
If so, use position:absolute. This way the position of the element does not affect the position of other elements.
如果是这样，请使用position:absolute. 这样元素的位置就不会影响其他元素的位置。
EDIT: Depending on what you're trying to do, relativemay be better.
编辑：根据你想要做什么，relative可能会更好。
EDIT2: And even better than that, use the height dynamically to determine how far to move the content. This way you're not constrained to a fixed height.
EDIT2：甚至比这更好的是，动态使用高度来确定将内容移动多远。这样你就不会被限制在一个固定的高度。
$('#slidenav').animate({
top: '-'+$(this).height()
}, 200);
$('#open a').toggle(
function(){
$('#slidenav').animate({
top: '0'
}, 500);
},
function(){
$('#slidenav').animate({
top: '-4'+$(this).height()
}, 500);
});
回答by Robert Greiner
I fixed it to what I think you are asking for.
我将它固定为我认为您要求的内容。
First thing's first, move the content below the stuff you want to be on top:
首先，将内容移动到您想要放在上面的内容下方：
<div id="open">
<a href="#">slide</a>
</div>
<div id="holder">
<div id="header">
<h1>TITLE HERE</h1>
</div>
<div id="contact">
</div>
</div>
<div id="slidenav">
....
Then, just bump your slidenavup some more to compensate. You could even hide the div completely until the show button is clicked if you want.
然后，再slidenav增加一些来补偿。如果需要，您甚至可以完全隐藏 div，直到单击显示按钮。
$(document).ready(function() {
$('#slidenav').animate({
marginTop: '-480px'
}, 200);
$('#open a').toggle( function(){
$('#slidenav').animate({
marginTop: '0'
}, 500);
},
function(){
$('#slidenav').animate({
marginTop: '-380px'
}, 500);
});
});
