【BLOGGER 技術】滑動後浮動式固定選單，超簡單！
1 分鐘快速學會滑動一段距離後讓上方選單固定在最上方！
自從 CSS 熟了後就發現 Blogger 的優勢，想怎麼改就怎麼改，這邊當作紀錄分享出來一些 Blogger 好用的技巧，之後再統整成一篇。
為什麼要用這個?
根據統計，使用者進入網站後最容易注意到的就是選單(navigation)，一個好的選單可以讓使用者找到他想要看的資訊，達到資訊提供媒介的效果。
讓選單固定在上方的效果對於行動裝置的 UX 十分重要，尤其是部落格文章通常都不會太短，它可以讓使用者不用在看完文章後想點其他連結時一直往上滑(當然可能有 95% 的人文章看完後就關掉網站了…)
而且要是看到什麼讓使用者有興趣的東西，他可以直接在選單上尋找，降低他的麻煩。
不過這個問題其實比較好的方法應該是用側欄選單，不過就算是側欄顯示還是得用固定在上方的效果。
Javascript 程式碼
| 1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript">$(function() { $(window).scroll(function() { if ($(this).scrollTop() > 495) { /* 要滑動到選單的距離 */ $('.dropdowns').addClass('navFixed'); /* 幫選單加上固定效果 */ } else { $('.dropdowns').removeClass('navFixed'); /* 移除選單固定效果 */ } });});</script> |
這段程式意思是當螢幕滑動超過 495px 的距離時，就幫 class 名稱有 dropdown 的元件再加上一個 navFixed 這個 class，而有 dropdown 的這個 class 的元件你必須先確認整個網頁上只有選單有，才不用怕抓錯元件(一般來說會用這個名稱命名的應該只有選單有)
至於 495px 是我這個部落格上方的空間距離，你可以依照自己的空間作調整。可以把它放在最下面結束標籤的上方統一管理，免得之後要找不知道放到哪，更多詳情都在...
參考資料：https://www.mydesy.com/blogger
Orignal From: 【BLOGGER 技術】滑動後浮動式固定選單，超簡單！
留言
張貼留言