jquery 浮动层有关问题

jquery 浮动层问题

HTML code


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

//解决ie6.0 的bug
function handingIE6(){
    if($.browser.msie && $.browser.version=="6.0"){
        $("#flowDiv").css({"position":"absolute","right":"10px","z-index":100});
        //底部显示
        var divBottom = $(window).scrollTop()+$(window).height()-$("#flowDiv").outerHeight(true)-10;
        $("#flowDiv").animate({top:divBottom},{duration: 400, queue: false });
    }
}

$(function(){
    //关闭按钮
    $("#btnClose").click(function(){
        $("#flowDiv").fadeOut("fast");
    });
    
    //左侧点击显示
    $("#showFlow").click(function(){
        $("#flowDiv").slideDown("slow");
    });
    
    //IE6.0 执行代码
    if($.browser.msie && $.browser.version=="6.0"){
        handingIE6();
        
    }else{
        $("#flowDiv").css({"position":"fixed","right":"10px","bottom":"10px","z-index":100});        
    }
    //显示浮动层
    $("#flowDiv").slideDown("slow");
    //ie6.0 运行 
    $(window).scroll(function(){handingIE6();}).resize(function(){handingIE6();});
})
</script>
<style type="text/css">
    #flowDiv{ width:250px;  overflow:hidden; border:solid 1px green; font-size:13px; display:none;}
    #flowTitle{padding:3px 5px; height:20px; line-height:20px; background:#FFDD55; border-bottom:solid 1px green;  }
    #flowContent{height:100px; padding:5px; background:#E0F7FF;}
</style>
</head>
<body>
<div id="flowDiv">
    <div id="flowTitle"><span style="float:left">标题</span><span id="btnClose" style="float:right; cursor:pointer"> ｘ </span></div>
    <div id="flowContent">内容</div>
</div>

<p id="showFlow" style="height:1500px;  padding:10px; width:17px; cursor:pointer; background:#99AFC4; te">点击显示弹出层</p>
</body>
</html>

上面代码经过测试发现 ie6.0 有问题，当浏览器滚动条scrollTop 大于0的时候，刷新页面，发现浮动层位置不对。

经检验，发现是用了 $(window).height() 引起的，这是什么原因，如何解决？？？

------解决方案--------------------
测试了下，在ie6下刷新时获取不到 flowDiv 的 offsetHeight，
做了个延时。
觉得奇怪，明明是 $(function(){}) 之后再做的操作，为什么获取不到offsetHeight呢？
具体什么原因再看看。

HTML code


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

//解决ie6.0 的bug
function handingIE6(){
    if($.browser.msie && $.browser.version=="6.0"){
        $("#flowDiv").css({"position":"absolute","right":"10px","z-index":100});
        //底部显示
        //$('#flowTitle').html( $("#flowDiv")[0].offsetHeight )
        var divBottom = $(window).scrollTop()+$(window).height()-$("#flowDiv").outerHeight(true)-10;
        $("#flowDiv").animate({top:divBottom},{duration: 400, queue: false });            
    }
}

$(function(){
    //关闭按钮
    $("#btnClose").click(function(){
        $("#flowDiv").fadeOut("fast");
    });
    
    //左侧点击显示
    $("#showFlow").click(function(){
        $("#flowDiv").slideDown("slow");
    });
    
    //IE6.0 执行代码
    if($.browser.msie && $.browser.version=="6.0"){
        setTimeout(function(){
            handingIE6();
            $("#flowDiv").slideDown("slow");
        }, 200)
    }else{
        $("#flowDiv").css({"position":"fixed","right":"10px","bottom":"10px","z-index":100}); 
        $("#flowDiv").slideDown("slow");        
    }
    //显示浮动层
    
    //ie6.0 运行 
    $(window).scroll(function(){handingIE6();}).resize(function(){handingIE6();});
})
</script>
<style type="text/css">
    #flowDiv{ width:250px;  overflow:hidden; border:solid 1px green; font-size:13px; display:none;}
    #flowTitle{padding:3px 5px; height:20px; line-height:20px; background:#FFDD55; border-bottom:solid 1px green;  }
    #flowContent{height:100px; padding:5px; background:#E0F7FF;}
</style>
</head>
<body>
<div id="flowDiv">
    <div id="flowTitle"><span style="float:left">标题</span><span id="btnClose" style="float:right; cursor:pointer"> ｘ </span></div>
    <div id="flowContent">内容</div>
</div>

<p id="showFlow" style="height:1500px;  padding:10px; width:17px; cursor:pointer; background:#99AFC4; te">点击显示弹出层</p>
</body>
</html>

jquery 浮动层有关问题

相关推荐