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和#second处于相对位置。当我向下滚动时，第一个页脚在#second后面消失。但是当我向上滚动时，＃second footer并没有在#first div后面消失。

插图：Screen capture of my problem。
我需要绿色的一个被#first div隐藏（就像#second div的红色一个）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13; 看看它的数字4（黄色），它很棒！我需要1,2和3在第一个div父母身上做同样的事情。

Answer 1

我最终找到了如何做到这一点，我将我的页脚置于绝对位置，并在滚动时使用jQuery更改top属性。但它只适用于Firefox。 Chrome不知道scrollTop：/

需要修复div不要与父亲相对div重叠

1 个答案: