Portamento 隨卷軸移動的方框

Portamento 類似 Facebook 右邊廣告會跟著捲動的工具選單，不管使用者瀏覽到哪一個段落選單都會一職在旁邊滑動，或者是像 Facebook 一樣做成贊助商的列表，能為贊助商帶來更大的瀏覽版面。Portamento 的工作原理是使用浮動和絕對位置的設計方式，只需要一些簡單的 CSS 和 JavaScript 的程式碼就可以完成了。

使用方法：
第一步 載入 Portamento 所需要用到的 JavaScript 檔案
//IE 9 以下讓他能更支援 HTML5 的元素
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//Portamento 的主程式碼
<script src="../portamento.js"></script>

第二步 建立 HTML 內容區段
<div>
  <header>
<h1><a href="http://simianstudios.com/portamento/">Portamento</a> Demo</h1>
  </header>
  <div id="wrapper">
<div id="content">
<p>建立很多很多的文字這樣才能看到卷軸</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
<p>Bacon ipsum dolor sit amet do t-bone laborum, ad ground round turkey ball tip. Veniam aliqua jowl, duis in t-bone sint tongue fugiat. Pork loin tenderloin ad, veniam chicken meatloaf.</p>
</div>
<div id="sidebar">
<p>Hello, I'm a sliding panel - unless the viewport is too small to contain my full glory, in which case I will stay right here so users can see all of me.</p>
</div>
  </div>
  <footer>
<p>The sliding panel can cross the red line, as there is no bottom boundary.</p>
<p><small>Demo of <a href="http://simianstudios.com/portamento/">Portamento</a> by Kris Noble 2011. Tasty filler text by <a href="http://baconipsum.com">Bacon Ipsum</a>.</small></p>
  </footer>
</div>

第三步 為建立的區段做 CSS 樣式設計
* {margin:0; padding:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block; background: transparent;}
body {background-color:#fff; padding:48px 0; margin:0 auto;  width:850px; font-family:"Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; position:relative;}
h1 {margin-bottom:1em; font-size:3em; font-family: "Droid Serif", Georgia, "Times New Roman", serif; font-weight:normal;}
p {margin-bottom:1.5em; color:#ccc;}
p:first-of-type{color:#000;}
a {color:#585; text-decoration: none;}
footer {margin:0 0 1000px 0; padding-top:20px; border-top: 1px solid #f00;}
small {font-family: "Droid Serif", Georgia, "Times New Roman", serif; font-weight:normal; font-style:italic; color:#000;}
html body #sidebar p{color:#000;}
#wrapper {overflow: hidden;}
#content {width:486px; margin-right:10px; float:left; min-height:1200px;}
#sidebar {width:284px; padding:10px; background: #eee; float:right; height:400px;}
#portamento_container {float:right; position:relative;}
#portamento_container #sidebar {float:none; position:absolute;}
#portamento_container #sidebar.fixed {position:fixed;}

第四步 使用 JavaScript 讓 Portamento 起作用
$(function(){
    $('#sidebar').portamento({
      wrapper:$('body'),      // 讓滑動視窗不超過元素範圍
      gap:10,                 // 離開頂端與滑動面板的距離
      disableWorkaround:false // 如有不支援卷軸是否讓套件失去作用
    });
});
作者網站：http://simianstudios.com/portamento/
檔案大小：14.4 KB(包含範例)
檔案下載：http://simianstudios.com/portamento/portamento.zip
檔案備份：下載