İhtiyaç sabit div değil ana göreli div

Question

Ben yukarı ne zaman/gizleme arkasında kalacak bir altbilgi yapmaya çalışıyorum örtüşür yapmak.

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

iki altbilgi

sabit bir konumda olduğu, nispi bir konumda 0 alt ve #first ve #second:
2 div (birinci ve ikinci), alt alta düşünün. Aşağı kaydırdığımda, ilk altbilgi #second'in arkasından hayal kırıklığına uğrar. Fakat yukarı kaydırdığımda # saniye altbilgisi #first div'in arkasındaki hayal kırıklığını ortadan kaldırmaz.

Çizim: Screen capture of my problem.
Ben yeşil olanı (#second div tarafından kırmızı gibi) #first div tarafından gizlenmiş olması gerekir. 4 numaralı (sarı) de

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>

Bak o disepear ve o harika! İlk div ebeveynindeyken 1, 2 ve 3'ün aynı şeyi yapmasına ihtiyacım var.

Answer 1

Nihai olarak nasıl yapılacağını buldum, altbilgileri mutlak konuma getirdim ve kaydırdığımda en üst özniteliği değiştirmek için jQuery'yi kullanıyorum. Ama sadece Firefox ile çalışır. Krom don "t scrollTop biliyorum:/