css - 需要固定的 div 不要与父相对 div 重叠

Question

我正在尝试制作一个页脚，当我向上滚动时，它会留在后面/隐藏。
想象一下 2 个 div(第一个和第二个)，一个在另一个下面:

<div id="first">
    <div class="footer" style="color:red">
    </div>
</div>
<div id="second">
    <div class="footer" style="color:green">
    </div>
</div>

两个footer位置固定，bottom 0，#first和#second是相对位置。当我向下滚动时，第一个页脚消失在#second 后面。但是当我向上滚动时，#second 页脚并没有消失在#first div 后面。

插图:Screen capture of my problem .
我需要绿色的被#first div 隐藏(就像#second div 的红色一样)。

body{
 margin : 0px; 
}
.parent{
  height : 500px;
  width : 100%;
  position:relative;
}
.footer{
  position:fixed;
  bottom:0px;
  left:0px;
}

<div class="parent" style="background-color:red;">
    <div class="footer" style='color:yellow'>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</div>
<div class="parent" style="background-color:green;">
    <div class="footer" style='color:blue'>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</div>

看看数字 4(黄色)，它消失了，太棒了!我需要 1、2 和 3 在第一个 div 父级上执行相同的操作。

Answer 1

我终于找到了解决方法，我将页脚置于绝对位置，并在滚动时使用 jQuery 更改顶部属性。但它只适用于 Firefox。 Chrome 不知道 scrollTop :/