因工作需要要用到固定浮动层，所以就用到自己写的这个插件，顺便把这个插件从头到尾重写了一遍，这次因为自己要用所以插件重新测试过几次，应该有些朋友说遇到的问题应该都解决了吧，呵呵
09－11-05新的下载地址如下：下载地址
/*任意位置浮动固定层*/
/*没剑(http://regedit.cnblogs.com/) 2009-03-04*/
/*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/
/*2009-06-10修改：重新修改插件实现固定浮动层的方式，使用一个大固定层来定位
/*2009-07-16修改：修正IE6下无法固定在top上的问题
/*09-11-5修改：当自定义层的绝对位置时，加上top为空值时的判断
这次的方法偷自天涯新版页
经多次测试，基本上没bug~
有问题的朋友欢迎到偶的博客http://regedit.cnblogs.com/上提出
*/
/*调用：
1 无参数调用：默认浮动在右下角
$("#id").floatdiv();
2 内置固定位置浮动
//右下角
$("#id").floatdiv("rightbottom");
//左下角
$("#id").floatdiv("leftbottom");
//右下角
$("#id").floatdiv("rightbottom");
//左上角
$("#id").floatdiv("lefttop");
//右上角
$("#id").floatdiv("righttop");
//居中
$("#id").floatdiv("middle");
另外新添加了四个新的固定位置方法
middletop（居中置顶）、middlebottom（居中置低）、leftmiddle、rightmiddle
3 自定义位置浮动
$("#id").floatdiv({left:"10px",top:"10px"});
以上参数，设置浮动层在left 10个像素,top 10个像素的位置
欢迎交流，呵呵
posted @ 2008-03-11 11:01
没剑 阅读(16273)
评论(81) 编辑 收藏
发表评论
取消了IE6部分判断，IE7则生效。
不过不知道IE是什么效果。
去掉判断后ie6失效了
就是，有判断，ie6可以，ie7不行
去掉了判断就相反。
我在ff/ie7 ie6下都正常通过了啊？你们的问题是在哪？
我看了一下，可能是我打包时没打好，有一些旧的文件都打包进了，我现在重新上传了一下demo，你们下载下载再看看有没有问题
如果一个页面有多个层带有position:absolute; 的style，则全部都受到影响，和被控制层一起移动！
--引用--------------------------------------------------
goodhaha: 如果一个页面有多个层带有position:absolute; 的style，则全部都受到影响，和被控制层一起移动！
--------------------------------------------------------
这个问题我晚上看看，感谢你的意见
很好！
测试ie7 ff 有效
ie6能固定，但是当设定为右下时，把滚动条也挡住了.....
--引用--------------------------------------------------
goodhaha: 如果一个页面有多个层带有position:absolute; 的style，则全部都受到影响，和被控制层一起移动！
--------------------------------------------------------
请教楼主这个问题是怎么解决的？
我这里测试也是有这样的问题
对 switch 里的 rightbottom 和 righttop 两个 case 的 CSS 针对 IE6 hack 一下好像就OK了。
另外 middletop（居中置顶）、middlebottom（居中置低）、leftmiddle、rightmiddle 这四个最好也有，那就比较全了。
ie7出现木有滚动条啊！！怎么弄的？？
急啊·~~！
各位，这个插件我今天重新换了种方法写了一遍，你们遇到的问题应该都解决了，欢迎大家下载去试用，如果还有问题请在此留言，谢谢
另外应ChenMo的建议加上了： middletop（居中置顶）、middlebottom（居中置低）、leftmiddle、rightmiddle 这几个基本参数，呵呵
您好 我是JAVASCRIPT初学者 请问这个效果的原理是怎么样的啊 期待您的回复
@maya-x
原理就是在页面上加上一个页面大小的透明层，设置为固定fixed，可以称之为定位层，然后要添加为固定浮动的层就放在这个定位层里。这样子只要保持这个定位层在页面的最上方，哪么这个固定浮动层的效果就基本上出来了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="templates/wuhuama/scripts/jquery/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="templates/wuhuama/scripts/jquery/float-div/jquery.float-div.js"></script>
<script LANGUAGE="JavaScript">
$(function(){
$("#test").floatdiv();
});
</script>
<title></title>
</head>
<style>
#test {
position: absolute;
width: 90;
visibility: visible;
z-index: 20;
}
-->
</style>
<body style="margin:0px;" >
<form action="test.php">
<table>
<tr><th>title</th></tr>
<tr><td><button name="action" value="add" onclick="this.form.submit();">add</button></td></tr>
</table>
<input type="text" name="test" value="test" />
</form>
<div id="test">
test
</div>
</body>
</html>
以上html测试FF和IE
FF(ver3.0.7)中若本页内容有input或button皆无法点击,文字亦无法圈选反白,浮动DIV是正常
IE7皆正常
@fetter
你的问题已修正！请重新下载插件再测试一下吧
@fetter
呵呵，欢迎反馈意见，大家一起进步！！
如果一个页面有多个层带有position:absolute; 的style，则全部都受到影响，和被控制层一起移动！
@osmn00
我测试过没有问题，而且demo里就有一个层是带有position:absolute 的style的，如果可以的话发你的测试页代码给我看看是怎么回事
@没剑
为什么ie7下拖动条显示不出来呢...IE6正常。
如果一个页面有多个层带有position:absolute; 的style，则全部都受到影响，和被控制层一起移动！
demo在我这里也会出现问题 - -！
IE Version = 6.0.3790.3959
我处理不了，如解决请发一份至我邮箱，谢谢
博客：
我需要从右下角滑出的效果，并能关闭浮动窗。。。这个能不能做呢？想和你交流下。
我的QQ 6162575
将demo.htm中的js部分改为：
$(function(){
$('body').dblclick(function(){
$("#test").floatdiv("rightbottom");
});
});
即双击页面时才出现浮动层，把滚动条拉到最下端，然后再双击页面，ie6中出现的效果不是很理想。如何解决？
我就下载的你的代码,js文件没有任何改动.唯一改动就是将demo.htm中js的部分改为:
<script type="text/javascript">
$(function(){
$('body').dblclick(function(){
$("#test").floatdiv("rightbottom");
});
});
</script>
你原来的代码是加载完页面后就显示浮动层,我发现的问题是与用户进行交互后(这里是dblclick body)产生的问题.
出现问题的测试环境:
1.浏览器为ie6;
2.运行页面后,把滚动条滑到页面最下端,然后双击页面(dblclick body)
@kly
你的问题已解决了，你再下载新的插件试试@！
在居中浮动层是
浮动层比较大的情况下
效果不是很理想
自己该了下
case ("middle"): //居中
loc = { left: "50%", top: "50%",
"margin-top": "-" + ($(this).height() / 2) + "px",
"margin-left": "-" + ($(this).width() / 2) + "px"
};
break;
在应用vs.2005找不到物件
ie8
请问楼主要如何解决
上述问题已解决
但是使用浮动层
<asp:Panel ID="Panel2" runat="server" Width="100px" Height="100px" BackColor="black" style="display:none">
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
</asp:Panel>
vs.2005 Button2无法运行
这个是js，而你的button2是服务端行为，正常的话无法运行跟这个插件是没关系的
在IE6下，我这边测试是只有left和right有效，top无效了。好像那个postion:fixed在IE6下不能够使top生效。浮动块总在页面可见范围的最下边飘着。IE7和firefox都正常。
其中wrap=jQuery("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");
这句话如果去掉，在IE下就能居中，但是不能浮动，加上这句就只能浮动，不能居中浮动。
我QQ： 275545833，起初我以为是我这边有冲突，后来测试了您的那个demo也是一样的问题，所以问您一下，如果能解决，希望您告诉我，谢谢。
建议改成这样:
var _this=$(this);
_this.parent().append(wrap);
...............
//将要固定的层添加到固定层里
_this.appendTo(wrap);
我使用你这插件在一个页面,有多个tab.几乎每个tab都浮动个导航栏.
如果按照你原本的代码,浮动的代码都在最上面,无论哪个tab..
感谢你提供那么好的插件..
还有个问题.
浮动层宽度不同了.我是跟据百分比设置宽度的..
一个tab了里面的浮动还解决..多个tab不知道怎么解决.
sheeky:
我已更新过插件了，不知道还有问题不？
您好，我是36楼的。这个IE6下的计算方法，由于是通过那个防止跳动的方法会导致每次激活floatdiv的时候IE6下的图片全部重新加载。图片少的时候影像不大。但是这种操作多了的时候，每次都相当于刷页面，cpu会很高。
具体情况是这样的。我做了一个类似于漂浮在页面底部的浮动条，然后弹出层是一个固定的div，然后加载不同的内容时，这个浮动的div会改变left和bottom的位置，相当于每次打开弹窗都会执行一次floatdiv。而这个函数在IE6下的expression方法决定了他会重新渲染一边页面。
以前我刚开始的时候为了避免fixed在IE6下的失效，是采取把给body一个relative属性，然后把浮动的内容扔到一个class=fixed的节点中，这个几点给absolute属性。剩下的随动的内容扔到class=wrap的节点中，这样似乎在IE6下可以实现不重新加载图的效果。但是这对于已有的页面的改善来说工作量有点儿大。
我的想法是，在原有函数的基础之上把如果是IE6的情况改为，提取body内所有元素扔到一个层中，然后把浮动的内容扔到一个绝对定位的层中。LZ觉得靠谱么？
我邮箱:chenhao633@126.com
程序应用地址:http://finance.ifeng.com/
由于对您的程序有改动，比如曾加了可以动态改变浮动层的宽度等功能，所以把署名去掉了，请谅解。感谢您。
LZ好啊。。用了1.3.2的jQuery代替本文DEMO好象行不通。。。为什么啊。。。
LZ，当页面上有方大镜效果的时候这个浮动会视覆盖，同时建设你做一个可以拖戈的效果上去会更好
@sssfdsa
呵呵，我这个插件本来就是“任意位置浮动固定层”，如果加拖动就不是固定层了，我做这插件的原意是用来显示广告的，呵呵
不过如果你怕这浮动层会覆盖其它的层的话，可以偿试把浮动层的z-index设小点
用IE测试的时候，效果就如JS被浏览器禁止了一样，层跟随滚动条的拉动而拉动
楼主你好，下了你的插件，好像你的jquery是修改过的，假如是用没有修改过的jquery，那么插件已经什么改呢？谢谢
楼主你好，不好意思啊，是我自己看错了，我放错jquery的位置了，我放到插件的下面来了，不好意思，插件是正常的
在最新的maxthon2.5.9.2246下不正常，那个层不浮动，在页面最下方。在IE，TW下正常。IE为6.0。
你好，请问怎么设置像天涯一样可以按浏览页面大小，浮动层也按浏览器页面大小，缩短或延伸呢？ 一直关注！
多谢楼主的插件！ 我自己修改了一下， 可以实现了!!!!
case("middlebottom")://居中置低
loc={left:"50%",bottom:"0px","margin-bottom": "0",
"margin-left": "-" + ($(this).width() / 2) + "px"};
博主啊。
当定义$("#test").floatdiv({right:"0px",bottom:"50px"});
的时候就失效了。我查看了下。在
loc=location;
var str=loc.top;
str=str.replace("px","");
top=str;
这个地方有点问题。原来是loc.top没值，我修改了下。变成这个样子！
loc=location;
var str=loc.top;
var str2 = loc.bottom;
if (typeof(str) == 'undefined'){
str2=str2.replace("px","");
top=windowHeight-$(this).height()-str2;
}else{
str=str.replace("px","");
top=str;
}
就可以了。写法有点粗糙。博主考虑下。修复这个问题。
@gxingy
现在插件就是按窗口的大小而变动的啊，如窗口始终在右下角一样。
@猫圈圈
谢谢你的提示，确实是我粗心造成的，根据你的问题，我已修改了代码：
//09-11-5修改：加上top为空值时的判断
if (typeof(str)!= 'undefined'){
str=str.replace("px","");
top=str;
}
loc=location;
alert(loc.bottom);
var str=loc.top;
//09-11-5修改：加上top为空值时的判断
alert(loc.bottom);这名代码要去掉,不然每次页面加载时都会打开警告窗口
很好的插件,正好用到,非常感谢分享!
两个建议：
1. 插件名改为jquery.fixed.js,这样既简洁准确又非常好记；
2. 做一个精简版，只修正IE6下的绝对定位。对于其它常用的浏览
器仅用CSS定位就可以了。
如果页面里有其他使用了position的元素,这个层不会再页面Z轴最上边,会被其它层遮盖.
如果页头上没有这行：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ie6上测试的结果是，图层不能随滚动条滚动。
同样：如果页头上没有这行：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ie6上测试的结果是，图层不能随滚动条滚动，而且可能不出现，比如$("#test").floatdiv();时右下角什么也不显示。
老大看看如何解决？
你应该在里面在加上一个属性,
比如$("#id").floatdiv("middle").css("ccc.css");
让其载入CSS样式，这样就做到完美了。
一点个人意义，博主可以参考一下
ie6里，在div里嵌入iframe的时候iframe里的页面不能显示。
<div id="test" style="background-color: #666633; width: 300px; height: 100px;padding:2px;color:white;">
<iframe width=500 height=300 src=http://www.baidu.com></iframe>
我是测试内容~
我是测试内容~
我是测试内容~
我是测试内容~
我是测试内容~
我是测试内容~
我是测试内容~
我是测试内容~
我是测试内容~
我是测试内容~
我是测试内容~
</div>
iframe问题解决：需要将//$("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");注释掉。
ie6中iframe中的页面里的select显示不出来，不知应该改那里，谢谢～
这个，貌似jquery其他的版本不能兼容嘛，jquer1.4，1.3的都会报脚本错误
这个使用后IE6内核的input type="text"获取不到焦点，请问该如何解决
发现问题主要出自于expression控制的CSS，但是去掉expression又不会浮动，不知道怎么办才好，目前也没找到其他可用插件！
当在页面中执行方法下面再一次引用jquery时，原来正常的代码就出错了，
页面会弹出一个消息 显示 undefined
不知道是什么原因
我的是ie8 不会程序 所以没修改直接用的
楼主,在IE6中,div中放置一张图片的时候会出现脚本错误.
div如下
<div id="PF">
<a href="<%= Url.Action("PreSponsorPage","Home") %>">
<img src='<%=Url.Conten("~/content/Img/Index/banner_165.jpg") %>' alt="" /></a>
</div>
运行如下
$().ready(function() {
$("#PF").floatdiv();
引用的jquery为jquery-1.4.1.min.js
能帮我解决下这个问题吗?
如果一个页面有多个层带有position:absolute; 的style，则全部都受到影响，和被控制层一起移动！
我的是在IE6下出现的这问题
楼主那儿如果有好的请发一份给我邮箱:hubeiliuyaping@sina.com
如果想在初始时给定一个偏移,滚动超过这个偏移量再让浮动层置顶，怎样才能让闪动不太明显，求教。例子可参考google news 左侧浮动菜单。