網站是這個 ：http://simianstudios.com/portamento/
1.設置html
如下：
<div id="wrapper">
<div id="content">
<p>This shows a sliding panel with no bottom boundary, and a bigger gap between the top of the viewport and the top of the panel.</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>
<script src="<%: Url.Content("~/Scripts/portamento.js") %>"></script>
<script type="text/javascript">
$('#sidebar').portamento({ gap: 100 }); // set a 100px gap rather than the default 10px
</script>
2.設置 CSS
代碼如下：
<style type="text/css">
#wrapper {overflow: hidden; width:100%; }
#content {width:70%; margin-right:10px; float:left; min-height:1200px;}
#sidebar {width:200px; padding:10px; background:#f05b72 ; float:right; height:400px; }
#portamento_container {float:right; position:relative;} /* take the positioning of the sidebar, and become the start point for the sidebar positioning */
#portamento_container #sidebar {float:none; position:absolute;} /* no need to float anymore, become absolutely positoned */
#portamento_container #sidebar.fixed {position:fixed;} /* if the panel is sliding, it needs position:fixed */
</style>
3.引用portamento.js
portamento.js代碼如下：
/*!
*
* Portamento v1.1.1 - 2011-09-02
* http://simianstudios.com/portamento
*
* Copyright 2011 Kris Noble except where noted.
*
* Dual-licensed under the GPLv3 and Apache 2.0 licenses:
* http://www.gnu.org/licenses/gpl-3.0.html
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
/**
*
* Creates a sliding panel that respects the boundaries of
* a given wrapper, and also has sensible behaviour if the
* viewport is too small to display the whole panel.
*
* Full documentation at http://simianstudios.com/portamento
*
* ----
*
* Uses the viewportOffset plugin by Ben Alman aka Cowboy:
* http://benalman.com/projects/jquery-misc-plugins/#viewportoffset
*
* Uses a portion of CFT by Juriy Zaytsev aka Kangax:
* http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED
*
* Uses code by Matthew Eernisse:
* http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
*
* Builds on work by Remy Sharp:
* http://jqueryfordesigners.com/fixed-floating-elements/
*
*/
(function ($) {
$.fn.portamento = function (options) {
// we'll use the window and document objects a lot, so
// saving them as variables now saves a lot of function calls
var thisWindow = $(window);
var thisDocument = $(document);
/**
* NOTE by Kris - included here so as to avoid namespace clashes.
*
* jQuery viewportOffset - v0.3 - 2/3/2010
* http://benalman.com/projects/jquery-misc-plugins/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
$.fn.viewportOffset = function () {
var win = $(window);
var offset = $(this).offset();
return {
left: offset.left - win.scrollLeft(),
top: offset.top - win.scrollTop()
};
};
/**
*
* A test to see if position:fixed is supported.
* Taken from CFT by Kangax - http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED
* Included here so as to avoid namespace clashes.
*
*/
function positionFixedSupported() {
var container = document.body;
if (document.createElement && container && container.appendChild && container.removeChild) {
var el = document.createElement("div");
if (!el.getBoundingClientRect) {
return null;
}
el.innerHTML = "x";
el.style.cssText = "position:fixed;top:100px;";
container.appendChild(el);
var originalHeight = container.style.height, originalScrollTop = container.scrollTop;
container.style.height = "3000px";
container.scrollTop = 500;
var elementTop = el.getBoundingClientRect().top;
container.style.height = originalHeight;
var isSupported = elementTop === 100;
container.removeChild(el);
container.scrollTop = originalScrollTop;
return isSupported;
}
return null;
}
/**
*
* Get the scrollbar width by Matthew Eernisse.
* http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
* Included here so as to avoid namespace clashes.
*
*/
function getScrollerWidth() {
var scr = null;
var inn = null;
var wNoScroll = 0;
var wScroll = 0;
// Outer scrolling div
scr = document.createElement('div');
scr.style.position = 'absolute';
scr.style.top = '-1000px';
scr.style.left = '-1000px';
scr.style.width = '100px';
scr.style.height = '50px';
// Start with no scrollbar
scr.style.overflow = 'hidden';
// Inner content div
inn = document.createElement('div');
inn.style.width = '100%';
inn.style.height = '200px';
// Put the inner div in the scrolling div
scr.appendChild(inn);
// Append the scrolling div to the doc
document.body.appendChild(scr);
// Width of the inner div sans scrollbar
wNoScroll = inn.offsetWidth;
// Add the scrollbar
scr.style.overflow = 'auto';
// Width of the inner div width scrollbar
wScroll = inn.offsetWidth;
// Remove the scrolling div from the doc
document.body.removeChild(document.body.lastChild);
// Pixel width of the scroller
return (wNoScroll - wScroll);
}
// ---------------------------------------------------------------------------------------------------
// get the definitive options
var opts = $.extend({}, $.fn.portamento.defaults, options);
// setup the vars accordingly
var panel = this;
var wrapper = opts.wrapper;
var gap = opts.gap;
var disableWorkaround = opts.disableWorkaround;
var fullyCapableBrowser = positionFixedSupported();
if (panel.length != 1) {
// die gracefully if the user has tried to pass multiple elements
// (multiple element support is on the TODO list!) or no elements...
return this;
}
if (!fullyCapableBrowser && disableWorkaround) {
// just stop here, as the dev doesn't want to use the workaround
return this;
}
// wrap the floating panel in a div, then set a sensible min-height and width
panel.wrap('<div >
};
})(jQuery);
4.在js中調用
<script type="text/javascript">
$('#sidebar').portamento({ gap: 100 }); // set a 100px gap rather than the default 10px
</script>
其中sidebar為要浮動的div。簡單吧