jQuery插件实现DIV浮动在页面固定位置中

今天看到一个很好的jquery插件:(详细demo请去附件下载)

我们浏览网站的时候,经常能看到固定在页面中且不会随着滚动条滚动的DIV层,这样的浮动效果可通过Portamento这个jQuery插件实现。

jQuery插件实现DIV浮动在页面固定位置中

  Portamento是一个轻量级的jQuery插件,它具有简单并且容易使用的特点。使用此插件,只需一行代码便可实现网页元素浮动于固定位置的效果。它会检测浏览器大小是否足以显示浮动层,如果过小将不会浮动显示。Portamento也提供了几个参数可供设置,定制性也是比较高的。

如何使用

此插件的使用方法其实很简单,首先要引入jQuery库和portamento插件,如下

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

对需要设置浮动的元素添加必要的CSS样式,代码如下(sidebar即为浮动的元素)

#portamento_container {float:right; position:relative;}
#portamento_container #sidebar {float:none; position:absolute;}
#portamento_container #sidebar.fixed {position:fixed;}

最后初始化即可,完整代码可查看文后的演示

$('#sidebar').portamento();

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值