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

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>

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

• 问题1。（滚动前）

  #内容

  不会从

  #标题

• 问题2。（滚动后）

  #内容

  在用户向下滚动页面时在

  #标题

  上方可见。理想情况下，当
  元素的

  seek

  持续时间保持可见时，我仍然希望在

  标题上方看到空白

---

带有

位置：fixed的元素将从文档流中删除，这意味着它们不会“占用页面空间”。因此，下一个div出现在它下面，因为没有任何东西迫使它向下移动。将
边距顶部
添加到等于固定导航栏高度的div中，它应该看起来像您希望的那样

要使固定页眉正好显示在页面顶部，请向其添加
top:0
。
在页面正文中使用padding top，并为页眉添加top:0。对于上面的空白，可以使用纯白边框

Css:

如果您希望将其缩小，并且仅对内容使用滚动控件，则应在本周编辑CSS lke

#content {
   position: fixed;
   top: 120px;
   height: 70%;
   background-color: #aaa;
   overflow-y: scroll;
   width: 98%;
}

高度可以是您选择设置的任何高度。但是在jeneral，我会同意他的建议。
只是一个旁注，除了显示表格数据之外，你应该避免使用
表格
。好的一点是，我只是发现使用表格比css更容易定位元素，有时使用
top:0#header
上的code>将持续时间指示器的顶部切掉这实际上相当不错，我没有想到仅在
#content
元素上的滚动条请确保检查如何在其他浏览器中重现这一点，您将需要添加-ms overflow样式属性。此UI专门用于firefox插件，但很高兴知道
#content {
   position: fixed;
   top: 120px;
   height: 70%;
   background-color: #aaa;
   overflow-y: scroll;
   width: 98%;
}