【Blogger技術】滑動後浮動式固定選單,超簡單!



1分鐘快速學會滑動一段距離後讓上方選單固定在最上方!


自從CSS熟了後就發現Blogger的優勢,想怎麼改就怎麼改,
這邊當作紀錄分享出來一些Blogger好用的技巧,之後再統整成一篇。


為什麼要用這個?
根據統計,使用者進入網站後最容易注意到的就是選單(navigation),一個好的選單可以讓使用者找到他想要看的資訊,達到資訊提供媒介的效果。

讓選單固定在上方的效果對於行動裝置的UX十分重要,
尤其是部落格文章通常都不會太短,它可以讓使用者不用在看完文章後想點其他連結時一直往上滑(當然可能有95%的人文章看完後就關掉網站了...)

而且要是看到什麼讓使用者有興趣的東西,他可以直接在選單上尋找,降低他的麻煩。

不過這個問題其實比較好的方法應該是用側欄選單,不過就算是側欄顯示還是得用固定在上方的效果


Javascript 程式碼
<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 程式碼
<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做出美麗的漸層顏色效果
jQuery GoTop 按鈕讓網頁快速回到最上方


結論:
滑動一段距離後上方選單固定在最上方, 
說穿了其實就只是偵測螢幕的移動距離,再加上CSS固定效果而已,其實很簡單。


Next
Previous
Click here for Comments

17 意見:

avatar

希望對您有幫助! :-d

avatar

感謝分享,剛剛幫自己部落格設定完成!整個很有成就感~~

avatar

我弄了我的部落格但是沒有成功
能請問一下是下拉式選單不同所造成的影響嗎?
但是我已經修改了dropdown名稱去我的選單名字了
http://tupaikong.blogspot.com
這是我的部落格

avatar

我有稍微試了一下是可以固定的,只是你選單顏色是透明要改一下顏色和樣式,不然固定時會被蓋掉,
另外因為你的下拉選單class 名稱是navMenu ,不叫dropdown,
所以你應該是針對你自己的下拉選單class名稱去動態修改CSS

avatar

您好!錦祥版主!
本人為網頁初學者,請指教!
請問,您的的程序中的495X是如何偵測出來的,我不知我的是多少(也想把其偵測出來)
萬分感謝您的答复!
Leon

avatar

有很多種方法可以測出來,最簡單的就是用chrome瀏覽器按下F12後個別找到自己部落格上方區塊所有元件的高度總和,其實也不一定要到很精確,如果真的不知道怎麼測的話,也可以自己調整程式中的數字,直到呈現出自己滿意的效果為止,另外我也滿推薦一款插件Dimensions
他可以幫你偵測網頁元件的長度與寬度,十分有用哦!
https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj

avatar

您好!錦祥版主!
十分感謝您的耐心解答。我已經學會啦並且基本搞定了這個菜單,只是自適應方面還需再優化。
非常感謝您給出的各種方法,特別是插件Dimensions特別棒特別好用。
再一次表示深深謝意!
Leon

avatar

不好意思,打擾版主一下
我試了我的部落格,但是沒成功
我看我的選單class名稱是row nav-wrapper(沒錯吧?還是這個header-navigation,但我兩個都試過了,都沒成功)
我也有把dropdown改成row nav-wrapper
我的部落格是
https://theandyhuang.blogspot.com/
感謝版主~~~

avatar

哈囉 Endy,我有在你的部落格用console測試效果是可以的哦!
只是你class名稱要能抓對,如果你沒有給他一個範圍的話,
jQuery Selector 在爬巢狀DOM的時候class有多個容易抓錯,

所以比較簡單的做法是直接在nav上加一個絕對不會重複的特出名稱class,這樣很輕易地能找出該元素去做調整。

avatar

不好意思
所以是改row nav-wrapper的wrapper改成絕對不會重複的字嗎
還是其他的class名稱呢

我有試過把wrapper改掉,javascript那邊也有改,但是一樣沒有作用

不好意思,是網頁新人,打擾版主了

avatar

哈囉 Endy,因為你部落格的nav才是有底色的(nav-wrapper那層沒有),
所以我覺得你可以抓nav那層的id加上class即可,
原本我文章內 $('.dropdowns').addClass('navFixed'); 是抓class的用法,

要改寫成抓id的用法:
$('#header-navigation').addClass('navFixed');
這樣子就可以了~

avatar

哈囉版主你好,
請問只有blogger才適用嗎?我的網站是用WordPress自架的也能嗎
因為我試了沒反應,另外請問class名稱該去哪看?wp的根目錄嗎(我沒找到><
不曉得是不是因為class不一樣的原因

我的網站:https://rich-freedom.com
方便的話再請你幫我看看

非常感謝~~~~

avatar

這些都只是javascript和css而已,和哪個平台沒有關係,blogger和WordPress都可以。
你的選單class一定會和我的不一樣啊,稍微看了一下你的網站選單class應該是main-navigation-container這個,用這個去試就可以了~

avatar

你好,可以請問一下嗎? 有沒有法子用小工具 HTML的小工具就達到這種固定選單的效果?
因為不懂程式碼,很怕救不回來,謝謝
另外你好貼心 竟然還有常用特殊符號^_^

avatar

可以先把設定檔匯出備份起來,改壞了重新匯入就可還原了

留言經過版主審核後才會出現哦!
因為不這樣做會有很多垃圾留言,不好意思 > <