滑動頁腳

新推出的網站The Markup擁有一個引人注目的標語：“ Big Tech正在看著您。我們正在看BigTech。”該網站的令人印象深刻的內容是通過升級開發的，其精緻的設計和技術與之匹配。值得注意的功能包括清潔排版，獨特的佈局，對內容塊的垂直懸停效果以及微妙而優雅的點圖案。

設計巧妙的頁腳是一個特別值得注意的元素。當用戶滾動到頁面的底部時，它會從主內容下方平穩地滑入視圖。讓我們探索如何重現這種效果！

這種效果的關鍵在於這四個要素：

1. 主要內容區域必須的最小高度為100VH。儘管大多數網站已經遵守此問題，但對於可靠的功能至關重要。
2. 主要內容區域需要堅固的背景顏色，以掩蓋頁腳滑入視圖。
3. 在主要內容之後，頁腳放在HTML中。相對定位和z指數調整確保主要內容保持頂部。
4. 粘性定位用於將頁腳錨定在視口底部。

這種粘性定位方法優於標記方法，該方法依賴於position: fixed;以及主內容上計算出的margin-bottom值。避免任意值會使實現更加強大和適應性。

這種粘性定位技術的簡單性和有效性是顯著的。感謝Stephen Shaw的這個聰明解決方案！我的最初嘗試使用固定定位和需要手動調整，突出了這種粘性方法的優越性。

Preethi早在2018年就展示了類似的技術。這裡的主要區別是將線性梯度用於人體背景，為實心背景顏色提供了靈活的替代方案，在某些設計環境中可能會受到限制。

視頻教程

Stephen Shaw提供了視頻教程！

以上是滑動頁腳的詳細內容。更多資訊請關注PHP中文網其他相關文章！