html - div 从固定标题后面开始，而不是在标题下方，并且在用户滚动时在标题上方可见

Question

http://jsfiddle.net/bobbyrne01/zL7hzwpu/

html ..

<div id="playerView">
    <div id="header" class="parentWidth">
        <table class="childWidth">
            <tr>
                <td>
                    <audio id="player" preload="auto" class="childWidth" controls></audio>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="left">
                        <img id="previousTrack" src="../images/previous-24.png" alt="Previous" />
                        <img id="stopTrack" src="../images/stop-24.png" alt="Stop" />
                        <img id="nextTrack" src="../images/next-24.png" alt="Next" />
                    </div>
                    <div class="right">
                        <img id="repeatAll" src="../images/repeatAll-24.png" alt="RepeatAll" />
                        <img id="random" src="../images/random-24.png" alt="Random" />
                    </div>
                </td>
            </tr>
        </table>
        <hr/>
        <table class="parentWidth">
            <tr>
                <td>
                    <input id="search" type="text" class="childWidth" />
                </td>
            </tr>
        </table>
    </div>
    <div id="content">Song 1
        <br/>Song 2
        <br/>Song 3
        <br/>Song 4
        <br/>Song 5
        <br/>Song 6
        <br/>Song 7
        <br/>Song 8
        <br/>Song 9
        <br/>Song 10
        <br/>Song 11
        <br/>Song 12
        <br/>Song 13
        <br/>Song 14
        <br/>Song 15
        <br/>Song 16
        <br/>Song 17
        <br/>Song 18
        <br/>Song 19
        <br/>Song 13
        <br/>Song 20
        <br/>Song 21
        <br/>Song 22
        <br/>Song 23
        <br/>Song 24
        <br/>Song 25
        <br/>Song 26
        <br/>Song 27
        <br/>Song 28
        <br/>Song 29
        <br/>Song 30
        <br/>Song 31
        <br/>Song 32
        <br/>Song 33
        <br/>Song 34
        <br/>Song 35
        <br/>Song 36
        <br/>Song 37
        <br/>Song 38
        <br/>Song 39
        <br/>Song 40
        <br/>
    </div>
</div>

css ..

.childWidth {
    width: 100%;
}
.parentWidth {
    width: 98%;
}
.left {
    float: left;
}
.right {
    float: right;
}
#header {
    background-color: #ccc;
    position: fixed;
}
#content {
    background-color: #aaa;
}

• 第 1 期(滚动前)#content不低于 #header 开始

• 第 2 期(滚动后)#content在 #header 上方可见当用户向下滚动页面时。理想情况下，我仍然希望在 #header 上方看到空白作为 <audio>元素的 seek持续时间仍然可见。

Answer 1

具有position: fixed 的元素已从文档流中删除，这意味着它们不会“占用页面空间”。因此，下一个 div 出现在它下面，因为没有任何东西迫使它向下移动。将 margin-top 添加到等于固定导航栏高度的 div，它应该看起来像你想要的那样。

要使固定页眉恰好显示在页面顶部，请向其添加 top:0。