Jquery slideDown（）与固定div并推送其余内容
我的目标是通过单击一个元素来向下/向上滑动Jquery slideDown（）与固定div并推送其余内容,jquery,css,Jquery,Css,我的目标是通过单击一个元素来向下/向上滑动div。我希望当div向下/向上滑动时，下面的内容也向下/向上移动。我还希望在滚动页面时，此div保持固定 这是我的尝试 HTML: JQuery： $("#btn").click(function(){ if ($("#slidebox").is(":hidden")){ $("#slidebox").slideDown(1500); }e
divdivdiv $("#btn").click(function(){
if ($("#slidebox").is(":hidden")){
$("#slidebox").slideDown(1500);
}else{
$("#slidebox").slideUp(1500);
}
});
wrapslidebox幻灯片盒div我能做些什么来达到欲望效果？谢谢 如果从顶部开始的滚动位置大于
x位置：固定到#幻灯片盒
元素：
$（“#btn”）。单击（函数（）{
如果（$（“#幻灯片框”）是（“：隐藏”））{
$（#slidebox”）。slideDown（1500）；
}否则{
$（#slidebox”）。slideUp（1500）；
}
});
$（窗口）。滚动（函数（）{
$（“#slidebox”）.toggleClass（'fixed'，$（window.scrollTop（）>10）；
})
#幻灯片盒{
高度：100px；
显示：无；
位置：相对位置；
背景：红色；
z指数：1；
}
#固定式滑盖盒{
位置：固定；
排名：0；
宽度：100%；
}
#包裹{
高度：1000px；
背景：绿色；
位置：相对位置；
}
#btn{
位置：绝对位置；
顶部：100px；
左：0px；
}
部分内容1
一些内容2
我正在使用chrome查看此内容。。当我滚动时，是否希望我能够关闭div？
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>200）{
$（'#slidebox'）.css({
“显示”：“无”
});
}
});
#滑盒{
高度：100px；
显示：无；
位置：相对位置；
背景：红色；
}
#包裹{
高度：1000px；
背景：绿色；
位置：相对位置；
}
#btn{
位置：绝对位置；
顶部：100px；
左：0px；
}
一些内容
部分内容2
$（“#btn”）。单击（函数（）{
如果（$（“#幻灯片框”）是（“：隐藏”））{
$（#slidebox”）。slideDown（1500）；
}否则{
$（#slidebox”）。slideUp（1500）；
}
});
复制了@Ionut的答案。归功于他/她：）
$（“#btn”）。单击（函数（）{
如果（$（“#幻灯片框”）是（“：隐藏”））{
$（#slidebox”）。slideDown（1500）；
$（“.slidebox包装”）.slideDown（1500）；
}否则{
$（#slidebox”）。slideUp（1500）；
$（“.slidebox包装”）.slideUp（1500）；
}
});
$（窗口）。滚动（函数（）{
$（“#slidebox”）.toggleClass（'fixed'，$（window.scrollTop（）>10）；
})
.slidebox包装器{
高度：100px；
显示：无；
}
#滑盒{
高度：100px；
显示：无；
位置：相对位置；
背景：红色；
z指数：1；
}
#固定式滑盖盒{
位置：固定；
排名：0；
宽度：100%；
}
#包裹{
高度：1000px；
背景：绿色；
位置：相对位置；
}
#btn{
位置：绝对位置；
顶部：100px；
左：0px；
}
部分内容1
一些内容2
所以您希望所有内容都是固定的？还是只有幻灯片盒？@nieknijl和幻灯片盒
。那么，当div位于固定位置时，为什么希望div下方的内容向下或向上移动？对我来说，这种移动行为与固定行为相结合听起来是不可能的：/@nieknijl的目标是制作一个固定的标题，扩展时不会与下面的内容重叠。啊，明白了！：）它起作用了！谢谢唯一的问题是幻灯片盒的宽度必须设置为100%。@João，我很高兴它对你有用。我已经将width:100%
添加到slidebox
元素中。请查看更新的答案。我还为滚动时的添加类解决方案添加了一个速记代码。将#slidebox
元素包装在一个高度相同的包装器中。这样，当您开始滚动页面时，页面不会跳转。查看我的答案：）@NiekNijland，对不起，我看不出它的行为方式有什么不同，请不要复制我的代码来添加到您的答案中。我正在参考这个精确的副本$（window）.scroll（function（）{$（“#slidebox”）.toggleClass（'fixed'，$（window.scrollTop（）>10）；}）
。这不是OP问的问题。我想João找到了他想要的答案。@Ionut在您的示例中，当您开始滚动时，绿色divs会向上滚动100px。在我的例子中，它不是。很抱歉我应该提到我抄了你的答案！将在我的回答中为您提供积分：）不，只有用户再次单击按钮，slidebox
才会关闭（slideUp）。谢谢你的回答。
#slidebox{
height:100px;
display:none;
position:relative;
background:red;
}
#wrap{
height:1000px;
background:green;
position:relative;
}
#btn{
position:absolute;
top:100px;
left:0px;
}
$("#btn").click(function(){
if ($("#slidebox").is(":hidden")){
$("#slidebox").slideDown(1500);
}else{
$("#slidebox").slideUp(1500);
}
});
<head>
<script src="js/currentjquery.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#slidebox').css({
'display' : 'none'
});
}
});
</script>
<style>
#slidebox {
height: 100px;
display: none;
position: relative;
background: red;
}
#wrap {
height: 1000px;
background: green;
position: relative;
}
#btn {
position: absolute;
top: 100px;
left: 0px;
}
</style>
</head>
<body>
<div id="slidebox">
Some content
</div>
<div id="wrap">
Some content 2
<input type="button" id="btn" value="Show Div">
</div>
<script>
$("#btn").click(function() {
if ($("#slidebox").is(":hidden")) {
$("#slidebox").slideDown(1500);
} else {
$("#slidebox").slideUp(1500);
}
});
</script>
</body>
</html>