滚动时将元素固定在页面顶部

Question

正如您从屏幕截图中看到的，我有一个<audio>元素，它在页面顶部保留在滚动状态。但是我希望在滚动开始之前元素是可见的。

我不能让这个工作没有凌乱的javascript删除元素并将其作为一个孩子附加滚动，任何想法？

http://jsfiddle.net/bobbyrne01/772yerga/1/

html ..

<div class="header">
    <audio controls>
        Your browser does not support the audio element.
    </audio>
</div>
<div class="outer">
    <span class="banner">LOGO</span>
    <div class="header">Header</div>
</div>
<div class="content">Content</div>

css ..

.header {
    background-color: #ccc;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: auto;
}
.outer {
    background-color: #fff;
    position: relative;
    height: 100px;
}
.outer .banner {
    font-size: 46px;
}
.outer .header {
    position: absolute;
    bottom: 0;
    z-index: 2;
    top: auto;
}
.content {
    height: 1500px;
    color: blue;
    background-color: #fff;
    margin-top: 100px;
}

滚动前..

滚动后..

Answer 1

我将标题的z-index更改为99以保持最佳状态 - 内容滚动到下方。并将top: 50px;添加到外部 - 开始降低

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

   .header {
        background-color: #ccc;
        width: 100%;
        position: fixed;
        z-index: 99;
    }
    .outer {
        background-color: #fff;
        position: relative;
        height: 100px;
        top: 50px;
    }
    .outer .banner {
        font-size: 46px;
    }
    .outer .header {
        position: absolute;
        bottom: 0;
        z-index: 2;
        top: auto;
    }
    .content {
        height: 1500px;
        color: blue;
        background-color: #fff;
        margin-top: 100px;
    }