在div上固定滾動

Question

在更新我的投資組合過程中，我想嘗試實現在此網站上執行的效果http://matthias.webrom.fr/，其中着陸頁本身不滾動，但內容滑過它。如果您將background-attachment: fixed放在其上，則可以獲得與背景相同的效果。有沒有一種方法可以在CSS上使用同樣的效果？

Answer 1

網站http://matthias.webrom.fr/由兩個主要部分組成，頭部和page_content。標題包含您想要複製的效果的首頁，page_content包含網站的其餘部分。使用開發工具很容易看到（在Chrome瀏覽器中查看 - >開發人員 - >開發人員工具），該工具非常有用！ （我建議你學習如何使用它）

如果你看一下標題CSS，你會發現：

background-attachment: fixed; 

這迫使背景停留在相同的位置（因此不帶滾動其餘內容）。但是，這僅適用於背景圖像。標題內有一個包含文本的節元素。截面位置設置爲：

position: fixed; 

這會強制文本保持在相同的位置，因爲它相對於瀏覽器窗口而不是文檔流定位。

現在爲了讓頁眉出現在page_content後面，您必須使用z-index。您希望標題位於其他所有內容的後面，因此它必須具有比page_content更低的z-index。