Portamento test
HTML
<div class="row">
<div class="left">Left</div>
<div id="sidebar">
This should be floating
</div>
</div>
<script>
/*!
*
* 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...
CSS
.row {
background: yellow;
height: 1000px;
position:relative;
z-index:99;
}
#floating {
background: white;
padding: 20px
}
JavaScript
$('#sidebar').portamento({
gap: 0,
disableWorkaround: true
});