[實作]側邊欄隨滑鼠滾動固定在畫面上

　　當你網站撰寫文章時，往往會有3~10個頁面的高度，而側邊欄卻只有1、2個頁面的高度，如上圖一般，也如你現在正在看的頁面，當你往下滑動的時候，側邊欄滑完後就是一段空白區域了。

　　但是你的網站可能會如這個台中美食網站或愛料理的這篇食譜一般，希望隨著使用者滑鼠往下滑的時候，右邊還能夠顯示【想給使用者看的資訊】或是【希望使用者能點擊的廣告】。

影片示例：

注意到了嗎?滑鼠滑到最下面時，右側的廣告欄仍不離不棄哦~

可以點此網址看看實際情況https://www.bonjour-centrale.tw/

原始的文章中有解說，有原生 JavaScript 和 jQuery 兩個版本，而我今天要教的是最簡單的做法(透過jQuery)，你可以按我的簡單的做法做，也歡迎觀看原文看更詳細的原理，接下來教學開始!

首先在頁面底部

之前貼入以下原始碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><!--如果網頁本身已經引入jQuery, 可以把這行刪掉-->
<script src="https://yourjavascript.com/93235116219/sidebar-follow.js"></script>
<script>
/* <!&#91;CDATA&#91; */
(new SidebarFollow()).init({
  element: jQuery('#sidebar-follow'),
  distanceToTop: 15
});
/* &#93;&#93;> */
</script>

如果你是用Wordpress架站的話，就打開佈景主題檔案中的"footer.php"修改即可。

將前台元素命名ID為sidebar-follow

例如你希望使用者畫面往下滑動後，側邊欄是Google的AdSense廣告，那你可以在Wordpress的【外觀→模組→新增→文字(任意文字或HTML)】，標題可以先不打，內容則輸入：

<div id="sidebar-follow">這裡插入Google AdSense的原始碼</div>

兩個步驟，現在你可以到你的網站中看看是否成功了。

　　這是比較簡單的做法，當初我按原始教學在做時試了二個小時才終於成功，因為原創者對程式碼很瞭解，但不瞭解那對初學者來說還是有困難度，希望這一篇能讓初學者也能輕鬆的實踐，尤其未來會愈來愈多的部落客使用Wordpress架站，而用這個方式展示廣告點擊率還不錯，是個非常實用的技巧!

現在，看懂了沒呀?

歡迎分享，轉貼請註明出處

2013年06月21日更新

感謝Kamui Tang的提問，並證實這個做法目前在Google Blogger是無法使用的，以js及jQuery兩種方式皆測試過暫時沒有實行的方法，若任何人有成功的話還墾請您可和大家分享一下心得哦~Thanks a lot!

2013年06月24日更新

上述方法一直無法達成的話，建議嘗試這篇【WordPress主題側邊欄隨窗口滾動】，已測試過無法以上述方法達成的佈景主題，以此方法達成類似效果。