浮动固定位置插件Portamento

 查看演示  website  立即下载

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

PREVIOUS:
NEXT:
Diapo轮播图-幻灯片插件
Colorbox弹出层插件