Question

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

我需要的是第一个div粘在页面的顶部，以便第二个div滑过第一个滚动。

我尝试了一些东西，但是我没有达到预期的效果。我不想使用fixed定位，因为div构成了界面布局的一部分;我担心制作div fixed会破坏布局。

我准备了以下 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; 
}

Answer 1

好吧，您可以通过JavaScript更改第一个div的top属性的值与滚动条的位置相关，以便在页面滚动时移动元素：

<强> EXAMPLE HERE

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

避免绝对定位div滚动

1 个答案: