我的目标是通过点击元素向下/向上滑动
div
。我希望当div
向下/向下滑动时,下面的内容也向下/向上移动。我还希望在滚动页面时保持div
不变。
这是我的尝试...
HTML:
<div id="slidebox">Some content</div>
<div id="wrap">Some content <input type="button" id="btn" value="Show Div"></div>
CSS:
#slidebox{
height:100px;
display:none;
position:relative;
background:red;
}
#wrap{
height:1000px;
background:green;
position:relative;
}
#btn{
position:absolute;
top:100px;
left:0px;
}
JQuery的:
$("#btn").click(function(){
if ($("#slidebox").is(":hidden")){
$("#slidebox").slideDown(1500);
}else{
$("#slidebox").slideUp(1500);
}
});
我实现了第一个目标。 wrap
推送slidebox
。但是当页面滚动时,slidebox
不会保持固定。我尝试更改divs
上的position属性,但它们开始出现不良行为。
我能做些什么来达到欲望的效果呢?谢谢。
答案 0 :(得分:1)
如果顶部的滚动位置大于x
,则可以添加一个类,该类会将position: fixed;
添加到#slidebox
元素:
$("#btn").click(function() {
if ($("#slidebox").is(":hidden")) {
$("#slidebox").slideDown(1500);
} else {
$("#slidebox").slideUp(1500);
}
});
$(window).scroll(function() {
$("#slidebox").toggleClass('fixed', $(window).scrollTop() > 10);
})
#slidebox {
height: 100px;
display: none;
position: relative;
background: red;
z-index: 1;
}
#slidebox.fixed {
position: fixed;
top: 0;
width: 100%;
}
#wrap {
height: 1000px;
background: green;
position: relative;
}
#btn {
position: absolute;
top: 100px;
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slidebox">Some content 1</div>
<div id="wrap">Some content 2<input type="button" id="btn" value="Show Div"></div>
答案 1 :(得分:1)
我正在使用chrome查看此内容。当我滚动时,您是否希望我能够关闭div?
<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>
答案 2 :(得分:0)
@Ionut的复制答案。给他/她的信用:)
$("#btn").click(function() {
if ($("#slidebox").is(":hidden")) {
$("#slidebox").slideDown(1500);
$(".slidebox-wrapper").slideDown(1500);
} else {
$("#slidebox").slideUp(1500);
$(".slidebox-wrapper").slideUp(1500);
}
});
$(window).scroll(function() {
$("#slidebox").toggleClass('fixed', $(window).scrollTop() > 10);
})
&#13;
.slidebox-wrapper {
height: 100px;
display: none;
}
#slidebox {
height: 100px;
display: none;
position: relative;
background: red;
z-index: 1;
}
#slidebox.fixed {
position: fixed;
top: 0;
width: 100%;
}
#wrap {
height: 1000px;
background: green;
position: relative;
}
#btn {
position: absolute;
top: 100px;
left: 0px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox-wrapper">
<div id="slidebox">Some content 1</div>
</div>
<div id="wrap">Some content 2<input type="button" id="btn" value="Show Div"></div>
&#13;