jquery – 在另一个div之上的div,但是应该在后面的div之下滚动

有一个div(即div_fixed)固定在位.另一个div,即other_content在div_fixed下面. other_content div具有padding-top属性,因此当滚动页面时,只有other_content在固定div下滚动.

小提琴是here

HTML：

<div class="div_fixed">FIXED</div>
<div class="other_content">
    content goes here<br/>
    content goes here<br/>
    content goes here<br/>
</div>

CSS：

div { color: #fff }
        .div_fixed { position: fixed;  
    width: 100%; 
    height: 100px; 


    }

.other_content { 
background: #f00; 
height: 5000px; 
color: #fff; 
padding-top: 100px; 

margin:0 auto;

}

但我希望非固定div保持固定div并希望非固定div在其上边缘下方消失,即非固定div上边缘的位置将保持固定但其内容将开始在页面滚动上消失只是当它停留在固定的div下面时它发生的方式.

所以我在非固定div之前的html(只有2个中断)进行了一些编辑：

<div class="div_fixed">FIXED</div>
<br><br/>
        <div class="other_content">
            content goes here<br/>
            content goes here<br/>
            content goes here<br/>
        </div>

css的加法是：

.fixed_div{

    z-index:-1;
    }

    .other_content{


    width:60%;
    z-index:99099900;


    }

但是非固定div的上边缘不会停留在我想要的位置.

怎么实现呢？

编辑：

假设我为非固定div添加背景图像.另一个div将滚动的固定div的背景图像部分是否有可能比非固定div的z-index更高？问题会以这种方式解决吗？

EDIT2

让我们假设fixed_div是标题,other_content是网页的内容主体.让我们添加一个带有页脚的页脚div. other_content中不应存在滚动.在滚动页面时,other_content应滚动.

解决方法

我想这就是你要找的东西.你想要以固定的方式定位固定的div,但第二个div不需要特殊的定位.只需给它一个margin-top：100px,其中100px是固定div的高度.

诀窍是使用z-index并添加position：relative;到内容div

工作演示：http://jsfiddle.net/KyP8L/3/

.div_fixed{
    height:100px;
    width:100%;    
    position:fixed;
    top:0;
    left:0;
    background:#ff0;
    z-index:500;
}
.other_content {
    width:60%;    
    background:#0ff;
    margin-top:100px;
    z-index:600;
    position:relative;
}
​
​

原文地址：https://www.jb51.cc/jquery/181138.html