HTML滾動效果

Question

我注意到很多網站最近正在實施新的滾動效果類型。這裏有一個例子：

https://banksimple.com/

當你第一次開始滾動的最初部分留在地方（1 z-index的？），而內容滑過它的頂部。它還使用片段，並根據用戶滾動到的區域動態突出顯示其導航欄。

我見過幾個網站使用類似的技術。其中一個（我找不到鏈接）動態改變背景。

是否有一種常用的技術用於這些類型的網站？

Answer 1

前兩部分使用position:fixed。

This fixes items to a position on the page。即使滾動，他們也不會移動。

滾動部分使用position:absolute高z-index。

這個滾動條很好，因爲它有一個比fixed position元素更高的z-index，它滾動它們。

Answer 2

有幾種方法可以做到這一點，但最簡單的就是隻是讓一個div，並使用CSS

"position:fixed;" 

財產。這會導致div相對於瀏覽器窗口完全粘在原來的位置。

您可能還希望將z-index設置爲較大的值，以便div可以保持在頁面的其餘部分之上。

Answer 3

對於菜單和標題，這是一個簡單的使用position: fixed和z-index的CSS解決方案。這兩個菜單和標題有position: fixed，而菜單上有一個大的z-index值，主要內容有略低之一：

#menu { position: fixed; top: 0; left: 0; z-index: 2000; } 
#header { position: fixed; top: ??; left: 0; } 
#wrapper { z-index: 10; } 

至於片段的東西，它使用JS來完成。 W3Fools具有相同的功能，使用jQuery完成。也許你可以破譯the script。看起來像掛鉤到文檔的滾動事件，檢查位置是否元素高於視口的位置，並相應採取行動。

Answer 4

一種方法是結合CSS + JavaScript的假設（jQuery的）

CSS：

position:fixed的頂部面板。

使用jQuery offset來檢測容器位置，然後您可以爲「高亮導航欄」應用CSS類。