2016-01-15 59 views
0

我想要將頁眉圖像固定在我的網頁屏幕頂部,並允許內容填充的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; 
} 
+0

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

+0

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

回答

1

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

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

+0

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

+0

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

+0

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

0

加入 '的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>

+0

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

0

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

您的main有一個簡單的問題。爲了使其在#headerfixed屬性之上可見,我添加了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>