不用fixed能否实现固定悬浮？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        body{
            height: 2000px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div id="test"></div>
<script>
    (function(w,d){
        var div= d.getElementById('test'),
            de=document.documentElement,
            t=null,
            scrollTop= 0,
            windowHeight=parseInt(window.innerHeight||de&&de.clientHeight||document.body.clientHeight);
        window.onscroll=function(){
            if(t){
                window.clearTimeout(t);
            }
            t=window.setTimeout(function(){
                scrollTop=parseInt(de&&de.scrollTop||document.body.scrollTop);
                div.style.top=windowHeight+scrollTop-200+'px';
            },20);
        }
    })(window,document)
</script>
</body>
</html>
类似这样试试 

解决方案 »

  1.   

    最好做个判断 对于支持fixed的用fixed  不支持的再用js
    现在基本都支持了 除了ie6
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            #test{
                width: 200px;
                height: 200px;
                background-color: #ff0000;
                position: fixed;
                right: 0;
                bottom: 0;
            }
            div{
                width: 200px;
                height: 2000px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    <div id="test"></div>
    <div></div>
    <script>
        (function(w,d){
            var div= d.getElementById('test');
            if(div.currentStyle&&div.currentStyle.position.toLowerCase()!='fixed'){
                div.style.position='absolute';
                change();
            }
            function change(){
                var de=document.documentElement,
                        t=null,
                        scrollTop= 0,
                        windowHeight=parseInt(window.innerHeight||de&&de.clientHeight||document.body.clientHeight);
                window.onscroll=function(){
                    if(t){
                        window.clearTimeout(t);
                    }
                    t=window.setTimeout(function(){
                        scrollTop=parseInt(de&&de.scrollTop||document.body.scrollTop);
                        div.style.top=windowHeight+scrollTop-200+'px';
                    },20);
                }
            }
        })(window,document)
    </script>
    </body>
    </html>
    大体这样