浮动固定位置插件Portamento

插件特效

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

插件描述：Portamento是一个jQuery插件，用于为网页添加一个浮动面板。当网页滚动时，面板也会随着滚动。

Portamento是一个jQuery插件，用于为网页添加一个浮动面板。当网页滚动时，面板也会随着滚动。

用法

使用是很容易的。只是按照下面的步骤，你会有一个平稳的滑动面板！

1.在您的页面，只是之前</body>中加入 portamento.js和jquery库.

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

2.在您的 html中加入您想要浮动的div定义好id如"#sidebar".

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

3.在您的 JavaScript 应用插件到你想要元素中:

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

4.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;
}