【教學】滑動後浮動式固定連結 行動版與電腦版分開設定

後台「主題」→「編輯 HTML」

加入以下CSS

.navFixed {
  z-index: 10;          
  position: fixed;      
  top: 0;
  right: 0px;
  margin-top: 0;
  width: 160px;
  opacity: 0.5;
  transition: opacity 0s ease-out;   
}

.navFixed:hover{
  z-index: 10;          
  position: fixed;      
  top: 0;
  right: 0px;
  margin-top: 0;
  width: 160px;
  opacity: 0.99;
  transition: opacity .5s ease-out;   
}

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

第一個為電腦版平常的顯示，固定在畫面右方，透明度設0.5 

第二個為電腦版滑鼠移過去連結時的顯示，透明度設為0.99 

第三個為行動版的顯示，固定在畫面上方

搜尋「/head」，在它的上方加入以下script

   <!--浮動式固定連結--> 
   <script type='text/javascript'>
	$(function() {
	  $(window).scroll(function() {
	    if ($(this).scrollTop() &gt; 600)  {          /* 滑動距離 */
	       $(&#39;.tabs&#39;).addClass(&#39;navFixed&#39;);   /* 固定效果 */
    	} else {
      	$(&#39;.tabs&#39;).removeClass(&#39;navFixed&#39;); /* 移除固定效果 */
    	}
  	  });
	});
   </script>