标题:jQuery铺浮动层上下滚动固定效果IE问题
只看楼主
wang582
Rank: 1
等 级:新手上路
帖 子:5
专家分:0
注 册:2012-6-4
 问题点数:0 回复次数:1 
jQuery铺浮动层上下滚动固定效果IE问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定窗口</title>
<script type="text/javascript" src="../../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
(function($){
    $(function(){
        var signal = true;
        var box = $(".boxLeft","#main"), boxClone;
        var boxScrollTop = box.offset().top;
        var boxScrollLeft = box.offset().left;
      
        $(window).bind("scroll",function(){      
            if( $(window).scrollTop() >= boxScrollTop){
                if (signal) {
                    (boxClone = box.clone()).appendTo("body").end().css({
                        position:"fixed",
                        top :  0,
                        left: boxScrollLeft,
                        "z-index" : 9999
                    });                  
                    signal = false;
                }
            } else{
                if (!signal){
                    boxClone.remove();
                    signal = true;
                }
           
            }
           
        });
    });
   
})(jQuery);

</script>
<style type="text/css">
body{padding:0;margin:0}
.clear{clear:both;}


#wrap{width:1000px;margin:0 auto;position:relative;}
#header{height:90px;background:#268c24;}
#main{height:2000px;}
.boxLeft{float:left;height:300px;width:150px;text-align:center;background:red;}
#main .box{float:left;width:700px;text-align:center;}
#main .boxRight{float:left;height:300px;width:150px;text-align:center;background:red;}

#footer{height:90px;background:#268c24;}
</style>
</head>

<body>
<div id="wrap">
    <div id="header">头部</div>

    <div id="main">
        <div class="boxLeft">左侧</div>
        <div class="box">中间</div>
        <div class="boxRight">右侧</div>
        <div class="clear"></div>
    </div>

    <div id="footer">底部</div>
</div>
</body>
</html>

火狐下正常但在IE中不能正常运行
搜索更多相关主题的帖子: html javascript function content PUBLIC html javascript function content PUBLIC 
2012-06-19 14:47
wang582
Rank: 1
等 级:新手上路
帖 子:5
专家分:0
注 册:2012-6-4
得分:0 
(function($){
    $(function(){
        var signal = true;
        var box = $(".boxLeft","#main"), boxClone;
        var boxScrollTop = box.offset().top;
        var boxScrollLeft = box.offset().left;
        $(window).bind("scroll",function(){      
            if( $(window).scrollTop() >= boxScrollTop){
                if (signal) {
                    (boxClone = box.clone()).appendTo("body");
                    boxClone.css({                    
                        position:"fixed",
                        top :  0,
                        left: boxScrollLeft,
                        "z-index" : 9999
                    });                  
                    signal = false;
                }

                if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style){//ie6
                    boxClone.css({                    
                        position:"absolute",
                        top : $(this).scrollTop(),
                        left: boxScrollLeft,
                        "z-index" : 9999
                    });           
                }

            } else{
                if (!signal){
                    boxClone.remove();
                    signal = true;
                }
           
            }
           
        });
    });
   
})(jQuery);

问题已解决
2012-06-19 16:12



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-371869-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.065381 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved