貓城

BLACKCAT CASTLE

如何調整錨點位置不被浮動導覽列遮住

   207 VIEWS

最近在對時雨の町做改版,讓原本左側欄導覽改為置頂的浮動導覽列,這樣可以讓 UI 介面更為直覺,訪客可以更輕鬆地找到分類。

接著我便發現點擊文章中的錨點其文字會被浮動導覽列遮住,一開始直覺想到用 JS 障眼法來解決這個問題,不過能用 CSS 就不用 JS 的我想到了:target,於是就嘗試了以下做法,完美解決了這個問題。

什麼是 :target ?

:target是 CSS 偽類,代表目標元素,也就是 id 與當前的 URL 相匹配,在 CSS 設計 :target 即可控制想要目標元素(錨點)達到的效果。

如何調整錨點位置?

只要增加錨點前的高度即可,因此需要在:target後加上::before偽元素,代表高度是加在錨點之前,接著指定高度為浮動導覽列的高度即可,這時候要注意,由於點擊之後錨點會自動拉開指定的高度,因此還要再透過 margin 把位置拉回來。

廢話不多說,直接看範例:

:target::before {
content: "";
display: block;
height: 60px; /* 固定高度 */
margin: -60px 0 0; /* 把位置拉回來 */
}
由於每個人的網站不同,實際高度請依照自己網站的導覽列高度調整。

如果不知道 margin 負值的意義,可以先把這行註解掉,實際去操作一次就知道差別在哪裡了。

看看實際範例:DEMO 調整錨點位置範例


時雨 時雨,時雨の町-日文學習園地站長,為了記錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站相關知識與網頁程式語言。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS