Нужна исправлена ​​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> 

Эти два нижних колонтитулов находятся в фиксированном положении, нижние 0, и #First и находятся в # Второй относительном положении. Когда я прокручиваю вниз, первый нижний колонтитул исчезает за # секундой. Но когда я прокручиваю вверх, нижний нижний колонтитул # не исчезает позади #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 (желтый) это disepear, и это здорово! Мне нужно, чтобы 1, 2 и 3 делали то же самое, когда он был на первом родителе div.

Answer 1

Я, наконец, нашел, как это сделать, я сделал нижние колонтитулы в абсолютном положении и использовал jQuery для изменения верхнего атрибута при прокрутке. Но он работает только с Firefox. Хром не знаю scrollTop:/