浮动固定位置插件Portamento

所属分类:其他-浏览器调整

 24858  107  查看评论 (12)
浮动固定位置插件Portamento ie兼容10

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


相关插件-浏览器调整

jQuery字体缩放缩放插件zoomFontSize.js

jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放
  浏览器调整
 20423  67

检测浏览器窗口变化

一个小小的插件来处理事件后(窗口)大小
  浏览器调整
 23726  98

浮动固定位置插件Portamento

Portamento是一个jQuery插件,用于为网页添加一个浮动面板。当网页滚动时,面板也会随着滚动。
  浏览器调整
 24858  107

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

    拒絕誘惑 0
    2017/4/24 18:23:39

    一个页面不能多个,只能一个

    回复
    血无痕 0
    2016/12/22 18:12:40

    最关键的就是position:fixed;

    回复
    福寿禄 0
    2016/9/12 17:09:54
    yoonfeng 0
    2016/5/3 15:05:34
    我想觉得根本不用插件,就随便几行js代码就可以完成了 回复
    JQ新人 0
    2016/4/27 20:04:16
    其实不用插件,单几行js代码和css配合就可以做到 回复
    杨小爷 0
    2016/2/3 16:02:28

    亲测,IE8 9是支持的,7不支持

    回复
    Eli 0
    2014/12/26 11:43:00
    陈嘉琪 0
    2014/9/12 2:51:08
    大圣 0
    2014/7/25 23:00:00
    不可不戒 0
    2014/1/13 16:34:00

    正在找个效果,不错用上了,非常感谢!

    回复
取消回复