符合WEB标准的浮动层（jQuery版）！

niunan · 发表于 2013-1-29 07:49:34

网上有好多的浮动层之类的代码，所谓的浮动层，就是层里的内容会随着页面的滚动而滚动，很多网站上都有的“QQ在线服务”就是个很好的例子，目前本人工作的这个网站中也需要用到了“QQ在线服务”，于是自己从网上下载了N多源码，这些源码运行起来是没有问题的，可是当我把其中的一些重要代码粘贴到vs中新建的ASPX页面的时候，运行ASPX页面的时候就不能随着页面的滚动而滚动了。
仔细对比ASPX页面代码和他的源码后发现，原来问题出现在DOCTYPE定义上，那些源码N多都是没有定义到DOCTYPE的，而新建的每个一ASPX页面都会有如下DOCTYPE定义：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
网上搜索后发现，这是目前很多网页都采用的标准，正好自己目前又在学习JQUERY，就想自己写一个符合WEB标准的浮动出来，首先研究一下之前下载的那些源码，找到浮动层的编写思路：层可以随着页面滚动而滚动，说明肯定是脱离了标准流的，所以在层的CSS定义中以下的这句代码肯定少不了：
position:absolute;
紧接着，因为是上下移动，所以就是要改变层的CSS样式中的top属性，注意是小写的，如果在代码中写大写的话那是会出错的，因为要符合“标准”...
那我们又如何改变top属性呢？在每回页面滚动的时候，都会有一个滚动的高度，也就是scrollTop，我们就可以在每回页面滚动的时候把我们原来层的top+滚动的高度，这样也就成了。
接下来问题又来了，scrollTop的获取IE和非IE的又有不同，经搜索得知，可用如下代码获取scrollTop：
var bodyTop = 0; if (typeof window.pageYOffset != 'undefined') { bodyTop = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { bodyTop = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { bodyTop = document.body.scrollTop; }
经过上面的分析我们知道，只要在每回页面滚动的时候都重新设置层的top属性即可。下面是我用自己写的源码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="qqonline.aspx.cs" Inherits="qqonline" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>浮动广告</title> <style type="text/css"> #qqonline{ background-color:Yellow; border: 1px solid #fcc; position:absolute; top:250px; left:16px; width:200px; height:120px; } </style> <script src="jquery-1.2.6.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(window).scroll(function() { // 页面发生scroll事件时触发 var bodyTop = 0; if (typeof window.pageYOffset != 'undefined') { bodyTop = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { bodyTop = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { bodyTop = document.body.scrollTop; } $("#qqonline").css("top", 250 + bodyTop) // 设置层的CSS样式中的top属性, 注意要是小写，要符合“标准” $("#qqonline").text(bodyTop); // 设置层的内容，这里只是显示当前的scrollTop }); </script></head><body style="height:1800px"> <form id="form1" runat="server"> </form> <div id="qqonline"> QQ在线服务 </div></body></html>
因为新建立的是ASPX页面，所以开头有<%@那句，不过在后置代码里是什么都没有写。
最后运行页面，即可看到，随着页面滚动的滚动，层总是保持在同一个地方。
以上代码经测试，IE6,IE7,IE8 b2，FF,OPERA,插肉咪（chrome）浏览器都能正确的显示，而且页面还符合“标准”。
从以上得知，一般来说“标准”都有两个，一个是强者制定的标准（IE），一个是由众多与强者相对的弱者组合起来制定的标准，俗话说分久必合，可看来我想等到我去见毛爷爷的那一天都合不了啊！！！

		自动登录	找回密码
密码			立即注册