帶滾動背景的粘性標題

Question

我爲我的一個客戶做了一個（粘性）標題。 背景已修復。所以當頁面滾動時，背景似乎會滑動到元素後面。直到標題粘貼。

我的客戶端希望背景仍然滾動瀏覽元素（使用頁面滾動），當頁眉粘貼到頂部時。

header { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 50px; 
    margin: 0; 
    padding: 0; 

    background-image: url('../img/background.png'); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 100% 100%; 
} 

header.sticky { 
    display: block; 
    position: fixed; 
} 

任何人有關如何做到這一點的想法？

僞元素:: before和:: after已經在使用中。

Answer 1

在可滾動的容器上設置背景圖像。像文件的主體一樣。有位置：相對。

body { background: url(...); position: relative; } 

然後設置有固定的位置固定元件。

header.stickOnTop { position:fixed; top:0px; } 

要使背景經過，請將sticky元素的背部設置爲不透明或完全透明。

header.stickyOnTop{ opacity: 0.5; }