第61款插件：jquery.floatDiv.js让你的DIV固定在页面上

一、插件介绍

在我们平常浏览网站的时候，我们会发现一些大型网站的导航不管页面多长，滚动条怎么移动它都会保持在原来的位置上。高端的设计师都会使用这种效果，因为它可以增加网站的用户体验。一些网站利用这种特效做了固定分享功能和联系方式功能等等。

二、插件图片示例

兼容浏览器：IE6+/Firefox/Google Chrome
官方链接：暂无
JS下载：http://www.ijquery.cn/js/jquery.floatDiv.js

三、使用方法及使用参数

1 无参数调用：默认浮动在右下角 $("#id").floatdiv();
2 内置固定位置浮动
//右下角 $("#id").floatdiv("rightbottom");
//左下角 $("#id").floatdiv("leftbottom");
//右下角 $("#id").floatdiv("rightbottom");
//左上角 $("#id").floatdiv("lefttop");
//右上角 $("#id").floatdiv("righttop");
//居中 $("#id").floatdiv("middle");
3 自定义位置浮动 $("#id").floatdiv({left:"10px",top:"10px"});
以上参数，设置浮动层在left 10个像素,top 10个像素的位置 $("#id").floatdiv({right:"10px",top:"10px"});

四、使用教程

HTML代码：

<div id="test">
<img src="float.jpg" alt="" title="" />
</div>
<div style="width:980px;height:800px;margin:0 auto;background:#CCCCCC;"> </div>

 JS代码：

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.floatDiv.js"></script>
<script type="text/javascript"> $(function(){ $("#test").floatdiv({top:"80px",right:"100px"}); }); </script>

本例用到的图片：