jquery - div 在另一个 div 上方，但应该在后一个 div 下方滚动

Question

有一个div（即div_fixed）是固定位置的。另一个div就是other_content在div_fixed. other_contentdiv 有一个属性，padding-top因此当页面滚动时，只有other_content在固定 div 下方滚动。

小提琴在这里

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 将滚动的部分将z-index高于非固定的div？问题会这样解决吗？

编辑2

让我们假设它fixed_div是标题，other_content是网页的内容主体。让我们添加一个div带有 id的页脚footer。中不应出现滚动other_content。other_content滚动页面时应该滚动。

Answer 1

我想这就是你要找的。您需要以某种fixed方式定位固定 div，但第二个 div 不需要特殊定位。只需给它一个固定 div 的高度在margin-top:100px哪里。100px

诀窍是使用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;
}
​
​

Answer 2

一种选择是将内容 div 包装在另一个具有固定位置的容器中。

例如：

HTML：

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

CSS：

.fixed_container {
    position: fixed;
    overflow: auto;
    top:30px;
    width: 100%;
    height: 5000px;
    z-index:10; }

.other_content { position: absolute; }

演示：http: //jsfiddle.net/xmKMs/