Quick Fix - 網頁利用錨點連結導航時,導覽列遮住了標題怎麼辦

Q:這是個常見的 CSS 問題,當利用錨點連結 <a href="#heading"></a> 跳到該標題時,如果是 FixedSticky 的導覽列就會擋住標題,可以參考這個 CodePen範例

A:這問題的解法有相當多種,但這邊想推薦一個最簡單的純 CSS 解法:

1
2
3
:root {
scroll-padding-top: 3rem;
}

將上述 3em 的部分替換成自己的導覽列高度即可,可以在 CodePen範例 中玩玩看!

Quick Fix 是一些我自己平時遇到各種小問題的合輯,並提供自己的快速解法

參考

3 More Life-Changing CSS Tips

5 More Must Know CSS Tricks That Almost Nobody Knows

MDN: scroll-padding-top

找不到喜歡的單手鍵盤?那就自己做阿! Quick-Fix node-sass no such file or directory 錯誤
Buy Me A Coffee

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×