页面滚动,dom元素position:fixed,主要解决了ie6的兼容

<!DOCTYPE>

<html>

 <head>

  <title> New Document </title>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

  <style type="text/css">

    div,body{margin:0px;padding:0px;}

    .divcont{width:980px;height:3000px;border:1px solid #ccc;margin:0px auto;}

    .topcont{width:980px;height:100px;background:#91D94A;font-size:38px;text-align:center;line-height:100px;color:#fff;_position:absolute;_top:0px;}

    .toppos{position:fixed;top:0px;}

  </style>

  <!--[if IE 6]>  

    <style type="text/css">  

    *html{_background-image:url(about:blank); _background-attachment:fixed; zoom:1;}

    </style>  

  <![endif]-->  

 </head>



 <body>

 <div class="divcont">

    <div class="topcont" id="topcont"></div>

 </div>

 </body>

  <!--ie7以上使用-->

 <script type="text/javascript">

 <!--

    $(function(){

        var topcontheight = $("#topcont").height();

        

        $(window).scroll(function(){

            var win_scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

            if (win_scrollTop > topcontheight)

            {

                $("#topcont").addClass("toppos");

                $("#topcont").text(win_scrollTop);

            }

            else{

                $("#topcont").removeClass("toppos");

                $("#topcont").text("");

            }

        })

    })

    

 //-->

 </script>

 <!--兼容ie6-->

 <script type="text/javascript">

 <!--

    function ie6fun(){

      var isIE6=!!window.ActiveXObject&&!window.XMLHttpRequest;

      if (isIE6)

      {

            window.onload=function(){

            var obj=document.getElementById("topcont"); //position:fixed对象

            window.onscroll=function(){

                var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

                document.title=scrollTop;

                obj.style.position="absolute";

                obj.style.top=scrollTop+'px';

                }

            

            }

      }

    }ie6fun()

      

 //-->

 </script>



</html>

 

你可能感兴趣的:(position)