Scroll Follow 跟隨元素

Scroll Follow 是一個能讓網頁的元素跟著使用者移動基於 jQuery 框架開發，簡單容易使用並且兼容於多瀏覽器，可相容於 Opera 9+、Apple Safari、FireFox、Internet Explorer 6+、Google Chrome 等等的近代的瀏覽器使用。

使用方法：
第一步 載入 Scroll Follow 需要使用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架的 1.8.2 min 版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- jQuery UI 的框架 core 套件-->
<script type="text/javascript" src="ui.core.js"></script>
<!-- Scroll Follow 的主程式碼 -->
<script type="text/javascript" src="jquery.scrollFollow.js"></script>

第二步 設計跟隨浮動的 HTML 位置
<div id="example">
  <img src="/images/ducks2.png" alt="Ducks" />
  <p>
This is an example of Scroll Follow using some parameters.
  </p>
  <p>
    It should take one second
    to animate the scroll. Click the link below to toggle the sliding on/off.
  </p>
  <p>
    <a id="exampleLink">Default Text</a>
  </p>
  <p>
    <a href="#">Back to Scroll Follow home.</a>
  </p>
</div><!--end #example-->

第三步 使用 CSS 設計畫面
body {
margin: 0;
padding: 0;
height: 2000px;
font-family: Georgia;
font-size: 0.9em;
line-height: 1.4em;
}
#example {
position: relative;
width: 180px;
margin: 10px;
padding: 20px 20px 20px;
background: #eee url(/images/sfbgTile.png);
border: 2px solid #42CBDC;
}
p {
margin: 7px 0 0 0;
}
a {
color: blue;
text-decoration: underline;
cursor: pointer;
}

第四步 撰寫 JavaScript 使 Scroll Follow 初始化
$(function(){
  $( '#example2' ).scrollFollow(
{
 speed: 1000,
 offset: 60,
 killSwitch: 'exampleLink',
 onText: 'Disable Follow',
 offText: 'Enable Follow'
}
  );
});

附上 Scroll Follow 可修改參數表

參數	型態	預設	說明
speed	整數	500	跟隨捲動的速度以毫秒為單位
easing	字串	'linear'	動畫的類型須加載 jQuery easing plugin
offset	整數	0	最上緣跟隨像素
container	字串	父元素	div 的 ID
killSwitch	字串	'killSwitch'	開關切換的 ID 需要使用到 jQuery Cookie plugin
onText	字串	'Turn Slide Off'	關閉的連結文字內容
offText	字串	'Turn Slide On'	開啟的連結文字內容
relativeTo	字串	'top'	滾動的對齊方式
delay	整數	0	在使用者結束滑動後才開始捲動以毫秒為單位

作者網站：http://kitchen.net-perspective.com/
檔案大小：9.64 KB
檔案下載：http://kitchen.net-perspective.com/files/jquery-scroll-follow.zip
檔案備份：下載