Question to say "I can!"

博客側邊欄跟隨滾動效果

2012-11-06

mg12提供的這個方法是就成熟的!喜歡的人可以參考一下。

原文:博客側邊欄跟隨滾動效果

 

功能描述

首先, 我認為該功能不應該出現在 IE6 中, 因為 IE6 不支持原生的 position:fixed 來固定元素位置, 如果我們使用類似回到頂部按鈕淡入淡出或者滑動的跟隨, 因為跟隨區塊較大, 這將會令用戶感到不適.

當頁面滾動條在跟隨區域下方, 那么跟隨區域變為浮動, 跟隨頁面滾動; 如果滾動條回到元素上方, 跟隨區域回到原來的位置上. 現在就可以滾動看看本博客側邊欄的效果.

參數描述

  • element: 跟隨區域的節點對象.
  • prevElement: 上方的節點對象. (已經不需要這個參數)
  • distanceToTop: 節點上邊到頁面頂部的距離.

側邊欄滾動跟隨區域

使用步驟

1. 下載所需文件

這里提供原生 JavaScript 和 jQuery 兩個版本可供下載:
從 GitHub 下載

2. 插入 JavaScript 和添加執行腳本

在頁面底部 </body> 之前加入代碼, 原生 JavaScript 例子如下:

<script src="sidebar-follow.js"></script>
<script>
/* <![CDATA[ */
(new SidebarFollow()).init({
	element: 'sidebar-follow',
	distanceToTop: 15
});
/* ]]> */
</script>

使用 jQuery 環境的例子如下:

<script src="jquery.js"></script> <!-- 如果已在網站的其他地方引入 jQuery, 請不要在次引入 -->
<script src="sidebar-follow-jquery.js"></script>
<script>
/* <![CDATA[ */
(new SidebarFollow()).init({
	element: jQuery('#sidebar-follow'),
	distanceToTop: 15
});
/* ]]> */
</script>

后話

這個區域主要用于了推薦熱門文章和增加廣告展示, 希望增加用戶逗留時間和廣告點擊率. 側邊欄跟隨功能的開發很簡單, 我一直不做是擔心頁面太多浮動區域影響用戶閱讀, 但現在頁面跟隨區域已經被廣泛使用, 用戶也習慣了那我也跟風加上. 現分享出來, 希望對其他站長也有幫助.

作者:admin | Categories:設計問題 | Tags:

一條評論

  1. 24k女人街說道:

    文件下載呢 那個

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 大盘股票走势 网络投资理财平台哪个好 快乐10分预测计算公式 投资股票收集的信息 七星彩明月珰 极速赛车10选1稳赢 体彩大乐透玩法中奖方式 福建快3一定牛推荐灭神 股票面值与发行价格 秒速赛车计划软件下载 体彩福建36选7 通富微电股票分析 云南十一选五五开奖走势图 福建36选7开奖查询 股票代码查询 安徽快三手机软件