Blogger,CSS,網頁設計,主選單

對於個人而言,免費的Blogger樣版已經很夠用。若非要說有哪不滿意,大概就是主選單,會隨著網頁滾動消失(如下圖),雖然有回到上方按鈕,且多數人瀏覽習慣,逐漸轉為手機、平板。不過我還是喜歡,能夠常駐上方的主選單。

Blogger,CSS,網頁設計,主選單

況且要做到這點,非常的簡單,只需要兩步驟。

一、於</style>前,增加CSS

進入到Blogger後台/主題/自訂/編輯HTML,點進html內文,利用Ctrl+F搜尋</style>,將下列CSS貼於其前。

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

二、於</body>前,增加script

完成上步驟後,搜尋</body>,將下列script貼於其前。

<script type='text/javascript'>
$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 150)  {    
       $('.header-menu').addClass('navFixed');} 
    else {
       $('.header-menu').removeClass('navFixed');}
  });
});
</script>

儲存後就可以發現,主選單已經常駐於上方!

Blogger,CSS,網頁設計,主選單