0

I'm trying to make a footer that will stay behind / hide when i will scroll up.
Imagine 2 div (first and second), one under the other :

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

The two footers are in fixed position, bottom 0, and #first and #second are in relative position. When i scroll down, the first footer disapear behind the #second. But when i scroll up, the #second footer doesn't disapear behind the #first div.

Illustration : Screen capture of my problem.
I need the green one to be hidden by the #first div (like the red one by the #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>
Look at the number 4 (yellow) it's disepear and it's great ! i need the 1, 2 and 3 do the same when it's on the first div parent.
MD'
  • 1
  • 2
  • Try set `z-index: 2` on the first and `z-index: 1` on the second – Asons Mar 22 '16 at 10:53
  • Yap @LGSon, already try this, now the green is working and the red don't – MD' Mar 22 '16 at 10:54
  • Post a minimal working snippet so we can see how it looks. – Asons Mar 22 '16 at 10:55
  • Possible duplicate of [Invert CSS font-color depending on background-color](http://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color) – Asons Mar 22 '16 at 12:40
  • I deleted my answer and voted to close for a duplicate. Using the dupe link's answers, you should be able to solve it. – Asons Mar 22 '16 at 12:41
  • Thanks, i will try, but do you think the color will chnage on scroll ? or will it be static ? – MD' Mar 22 '16 at 12:44
  • Can't say without a test, which I don't have time for now. – Asons Mar 22 '16 at 12:49

1 Answers1

0

I finaly found how to do it, i made my footers in absolute position, and use jQuery to change top attribute when i scroll. But it only works with Firefox. Chrome don"t know scrollTop :/

MD'
  • 1
  • 2