Floating Sliding Panel with jQuery - Portamento

Portamento is a useful jQuery plugin for creating a floating Sliding Panel on your webpage that works fine with floated and absolutely-positioned layouts. 

Basic Usage:

1. Include jQuery Library and Portamento in body section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="portamento.js"></script>

2. CSS

<style>  
#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;
} /* 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. Markup

<div id="sidebar">
.....
</div>

4. Call the function

<script>
	$('#sidebar').portamento();	
</script>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.