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

before scroll

问题2.（滚动后）#content在#header上方可见，因为用户向下滚动页面。理想情况下，我仍然希望在#header上方看到空格，因为<audio>元素的seek持续时间仍然可见。

after scroll

Answer 1

带有position: fixed的元素会从文档流中删除，这意味着他们不会占用空间＆＃34;在页面上。因此，下一个div出现在它下面，因为没有任何东西迫使它下降。将margin-top添加到等于固定导航栏高度的div，它应该看起来如何。

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

Answer 2

在页面正文中使用padding-top，并在标题中给出top：0。至于上面的空白区域，可以使用纯白色边框。

的CSS：

#header {
    background-color: #ccc;
    position: fixed;
    top: 0;
    border-top: 6px solid #fff;
}
body {
   padding-top: 120px
}

Updated fiddle

Answer 3

如果您希望将其缩小并仅为#content设置滚动控件，则应编辑CSS lke this

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

您可以选择设置它的高度。但在葬礼上，我会提出Raphael Serota对此问题的建议。

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

3 个答案: