DIV開始固定報頭後面，而不是下面標頭和上述標頭，如用戶滾動

http://jsfiddle.net/bobbyrne01/zL7hzwpu/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>

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>元素的持續時間保持可見。

after scroll

來源

2015-01-20 bobbyrne01

只是一個側面說明，除了顯示錶格數據之外，你應該避免使用'table'。 – kgh 2015-01-20 18:59:59

好點，我只是發現它更容易定位元素與錶快速然後css有時 – bobbyrne01 2015-01-20 19:20:21

如果你想使其更小，並有滾動僅控制＃內容，你應該修改你的CSS艾克這個

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

高度可以

你選擇設置它。但在jeneral我會與Raphael Serota的這個建議。

來源

2015-01-20 19:28:54

頂部這實際上是相當不錯，我沒有隻考慮'＃content'元素上的滾動條 – bobbyrne01 2015-01-20 19:39:49

務必檢查如何在其他瀏覽器中重現此操作，您將需要添加-ms-overflow-style屬性。 – 2015-01-20 19:49:59

此用戶界面專門用於Firefox插件，但很瞭解 – bobbyrne01 2015-01-20 20:53:41

與position: fixed元素從文檔流中去除，這意味着在頁面上他們不「佔用空間」。因此，下一個div出現在它下面，因爲沒有任何東西強制它。將margin-top添加到等於固定導航欄高度的div，它應該看起來如何。

要將固定標題正好顯示在頁面的頂部，請將top:0添加到它。

來源

2015-01-20 18:57:49

使用'頂部：0;''＃頭'削減持續時間指標 – bobbyrne01 2015-01-20 19:19:36

對頁面正文使用填充頂部，並將頂部：0添加到頁眉。至於上面的空白區域，您可以使用純白色邊框。

的CSS：

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

Updated fiddle

來源

2015-01-20 19:02:55

DIV開始固定報頭後面，而不是下面標頭和上述標頭，如用戶滾動

回答

相關問題