主題
透過CSS的position:fixed
與JavaScript的classList
來製作網站常見的置頂選單。
步驟
Step1. 取得頁面元素並偵測選單到頂部的高度
1 | // 取得nav元素 |
Step2. 對CSS增加樣式fixed-nav
1 | /* 當有fixed-nav時,把site-wrap縮放回1,讓整體有放大效果*/ |
Step3. 進行網頁捲軸高度偵測,決定是否變更選單樣式
1 | function fixNav() { |
其他
這個也是比較基礎的小練習,比較特別的是體驗到網站切換時使用transform: scale()
來作些微縮放在視覺上感受滿棒的。