Portamento Floating Fixed-Position Plugin

Add-ons

2026-07-21 12:59 6 次浏览 • 0 次下载 37.0KB

Portamento Floating Fixed-Position Plugin

Plugin Description: Portamento is a jQuery plugin that adds a floating panel to a web page. The panel moves along with the page as the user scrolls.

Portamento is a jQuery plugin that adds a floating panel to a web page. The panel moves along with the page as the user scrolls.

Usage

It is easy to use. Just follow the steps below, and you'll have a smoothly sliding panel!

1. Add portamento.js and the jQuery library to your page, just before </body>.

<script src="portamento.js"></script>
<script src="jquery-1.9.1.min.js"></script>

2. Add the div element you want to float to your HTML and assign it an ID, such as "#sidebar".

<div id="sidebar">
<p>Hello, I'm a sliding panel - unless the viewport </p>
</div>

3. Apply the plugin to the element you want in your JavaScript:

<script>
$('#sidebar').portamento({disableWorkaround: true}); 
</script>

4. Add the styles to your CSS.

#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;
}