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

niunan

浏览: 717510 次
性别:
来自: 南宁

最近访客更多访客>>

u012363178

abc123

Gootearsine

草料场

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

Web jQuery IE QQ CSS

网上有好多的浮动层之类的代码，所谓的浮动层，就是层里的内容会随着页面的滚动而滚动，很多网站上都有的“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"><!-- 给BODY加个样式，让页面出现滚动条 -->
    <form id="form1" runat="server">    
    </form>
    <div id="qqonline">
        QQ在线服务
    </div>
</body>
</html>

因为新建立的是ASPX页面，所以开头有<%@那句，不过在后置代码里是什么都没有写。
最后运行页面，即可看到，随着页面滚动的滚动，层总是保持在同一个地方。
以上代码经测试，IE6,IE7,IE8 b2，FF,OPERA,插肉咪（chrome）浏览器都能正确的显示，而且页面还符合“标准”。
从以上得知，一般来说“标准”都有两个，一个是强者制定的标准（IE），一个是由众多与强者相对的弱者组合起来制定的标准，俗话说分久必合，可看来我想等到我去见毛爷爷的那一天都合不了啊！！！

6
顶

0
踩

分享到：

解决Opera的本地化字体显示问题! | javascript检测浏览器和操作系统

2008-10-26 15:10
浏览 11317
评论(4)
分类:Web前端
查看更多

4 楼 edielei 2009-03-01

IE6里无效啊！

3 楼 niunan 2009-02-03

# 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;
#             }
其实这一大串代码在jQuery中有一行代码可以代替，那就是
var bodyTop = $(document).scrollTop();
经测试，如果是写成$(window).scrollTop()的话则在IE系列下是没有值的，万恶的jQuery API竟然没有scrollTop().

2 楼 niunan 2008-10-27

好像也是哦..呵呵 ...学习了...

1 楼 comasp 2008-10-26

bodyTop = document.documentElement.scrollTop + document.body.scrollTop;

就可以了。

因为始终有一个为 0 ；呵呵。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论