【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是我這個部落格上方的空間距離，你可以依照自己的空間作調整。

可以把它放在最下面</body>結束標籤的上方統一管理，免得之後要找不知道放到哪


CSS 程式碼
?

1 2 3 4 5 6 7 8 9 10 11 12

<style> .navFixed {   z-index: 10;            position: fixed;        top: 0;   left: 0;   margin-top: 0;   min-width: 100%;   opacity: 0.94;   transition: opacity .5s ease-out;   } </style>

position: fixed讓選單的位置是固定的，
z-index控制選單的顯示層級，愈小表示這個元件愈容易被其他東西蓋過去，不可以太大，以免超過原生Blogger的LIGHTBOX幻燈片功能
如果你的選單原本就是在上方的，那更簡單了，連Javascript都不用加，只要加上CSS效果即可。



【Blogger技術】相關文章
只用CSS做出美麗的漸層顏色效果



結論:

滑動一段距離後上方選單固定在最上方， 

說穿了其實就只是偵測螢幕的移動距離，再加上CSS固定效果而已，其實很簡單。

 

請檢查網址是否有誤! 或是該網址的摘要資訊無法被讀取, 或網路伺服器目前不穩定