避免绝对定位的div滚动

html_programmer

我有两个div,绝对定位。一个divz-index: 1,另一个z-index: 2当我滚动页面时,第二个div变得可见。

我需要的是第一个div停留在页面顶部,以便第二个div滚动到第一个div上。

我尝试了一些尝试,但是没有达到预期的效果。我不想使用fixed定位,因为divs是界面布局的一部分;恐怕使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相对于滚动条的位置来更改第一个divproperty的值,以便在页面滚动时移动元素:

这里的例子

$(window).on("scroll", function() { 
    $("#main").css("top", $(window).scrollTop());
}); 

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章