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 是我這個部落格上方的空間距離,你可以依照自己的空間作調整。可以把它放在最下面結束標籤的上方統一管理,免得之後要找不知道放到哪

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 固定效果而已,其實很簡單。

文章出處/ 咖尼馬管家的筆記

誠摯邀請你成為好朋友-->
        

About The Author

ㄇㄞˋ點子特搜編輯

藉由靈感的蒐集,並結合你與身俱來的創意,可以變得更美好也充滿趣味!! 麥點子將資訊整合,並透過編輯夥伴的創意,為大家挖掘、淘選、遞送來自世界的創意與設計訊息,在你的心田上種下一顆顆充滿靈感的「麥子」。 設計雖說是門專業技能,但設計感與美感是可以透過每天一點一滴累積而成的,藉由麥點子每天的文章傳遞,相信大家都都能夠從中獲得靈感,提升生活品味並讓處處充滿樂趣與希望! 因為麥點子夥伴們就是這樣子的一群人

Related Posts

留下你的看法: