我有两个div
,绝对定位。一个div
有z-index: 1
,另一个z-index: 2
。当我滚动页面时,第二个div
变得可见。
我需要的是第一个div停留在页面顶部,以便第二个div滚动到第一个div上。
我尝试了一些尝试,但是没有达到预期的效果。我不想使用fixed
定位,因为div
s是界面布局的一部分;恐怕使divfixed
会破坏布局。
我准备了以下jsfiddle:
CSS:
*{
margin: 0px;
padding: 0px;
}
body{
background: yellow;
height:100%;
}
#wrapper{
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100%;
background-color: blue;
}
#main{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: red;
z-index: 1;
}
#list{
position: absolute;
width: 100%;
height: 100%;
background-color: green;
bottom: -90%;
z-index: 2;
}
好了,您可以top
通过JavaScript相对于滚动条的位置来更改第一个div的property的值,以便在页面滚动时移动元素:
$(window).on("scroll", function() {
$("#main").css("top", $(window).scrollTop());
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句