獲取div滾動頁眉div圖像

我想要將頁眉圖像固定在我的網頁屏幕頂部，並允許內容填充的div在向下滾動時在圖像上滾動。獲取div滾動頁眉div圖像

問題在於屏幕頂部的圖像的大小是有反應的，我似乎無法讓這兩個方面一起工作，而沒有圖像扭曲，或者複製或縮放到圖像的一部分！

以下是我有一個解決方案最近的：

HTML

<body> 

    <div id="header"> 
    <img src="http://placehold.it/960x290" width="100%"> 
    </div> 

    <div id="main"> 

    <table> 
     <tr> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
     </tr> 
     <tr> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
     </tr> 
     <tr> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
     </tr> 
    </table> 

    </div> 

</body>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    min-height: 100%; 
} 

#main { 
    font-family: 'Hind', sans-serif; 
    color: black; 
    text-align: center; 
    font-size: 2.5vw; 
}

來源

2016-01-15 R. Davids

你能否介紹一些關於* *方面好嗎？ – Stickers

我找到了一個解決方案，但是我需要問：爲什麼在你爲'＃header'設置一個背景圖像的時候爲''header'裏面放了一個'img'？我在問這個問題，以便明白它是否必須**或幾乎不是 – AGE

添加position:relative;到main，然後給它一個z-index值。

檢查這裏的小提琴：https://jsfiddle.net/umpn66vd/

來源

2016-01-15 13:45:55

，除了現在'header'和'main'之間的差距相對增加時，因爲您減少了屏幕寬度？ –

你可以添加當前代碼最新狀態的小提琴鏈接嗎？謝謝 –

https://jsfiddle.net/umpn66vd/3/ –

加入 '的margin-top：25vw;'並刪除'position：relative;'這解決了它：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#header{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 100%; 
 
} 
 

 
#main { 
 
    margin-top:25vw; 
 
    font-family:'Hind', sans-serif; 
 
    background-color:white; 
 
    color:black; 
 
    text-align:center; 
 
    font-size:2.5vw; 
 
    position:relative; 
 
    z-index: 2; 
 
}

<div id="header"> 
 
<img src="https://placeholdit.imgix.net/~text?txtsize=73&txt=960%C3%97290&w=960&h=290" width="100%"> 
 
</div> 
 

 
<div id="main"> 
 

 
<table> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
    <tr> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    <td>info</td> 
 
    </tr> 
 
</table> 
 

 
</div>

來源

2016-01-15 14:39:18

請編輯你的答案來解釋**你做了什麼** – AGE

你的問題的根源是在你的img標籤，並在您的#main元素。您的img標籤的固定寬度爲1005px。這有效地使您的佈局不是響應。爲了解決這個問題，我把你的圖片作爲background屬性放入#header。

您的main有一個簡單的問題。爲了使其在#header的fixed屬性之上可見，我添加了background-color: transparent。爲了演示滾動結束，我簡單地爲它添加了高度和填充，當然，爲了測試目的，您可以隨時刪除這種樣式。

讓我知道如果您有任何問題。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
    
 
#header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 320px; 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url("http://placehold.it/960x290") no-repeat top center; 
 
} 
 
    
 
#main { 
 
    position: relative; 
 
    font-family: 'Hind', sans-serif; 
 
    color: black; 
 
    text-align: center; 
 
    font-size: 2.5vw; 
 
    background-color: transparent; 
 
    padding-top: 50vh; /* for test purposes only */ 
 
    height: 100vh; /* for test purposes only */ 
 
}

<div id="header"> 
 
</div> 
 

 
<div id="main"> 
 
    <table> 
 
    <tr> 
 
     <td>info</td> 
 
     <td>info</td> 
 
     <td>info</td> 
 
     <td>info</td> 
 
     <td>info</td> 
 
    </tr> 
 
    <tr> 
 
     <td>info</td> 
 
     <td>info</td> 
 
     <td>info</td> 
 
     <td>info</td> 
 
     <td>info</td> 
 
    </tr> 
 
    <tr> 
 
     <td>info</td> 
 
     <td>info</td> 
 
     <td>info</td> 
 
     <td>info</td> 
 
     <td>info</td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2016-01-15 14:58:48 AGE

獲取div滾動頁眉div圖像

回答

相關問題