By

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

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

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

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

影片示例:

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

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


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

首先在頁面底部</body>之前貼入以下原始碼:

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

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

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

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

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

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


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

  對原理有興趣的建議去看一下原作者的頁面,或是 點擊/下載 這份Javascript觀看,裡面有註解的說明可看,如果在實作上有任何的疑問歡迎在下面提問。

現在,看懂了沒呀?

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

歡迎分享,轉貼請註明出處分享轉貼請註明出處哦!

魔鬼,就藏在細節之中

2013年06月21日更新

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

2013年06月24日更新

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

留言

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Top