How to implement css fixed property via javascript?

Hi. I'm trying to imitate css fixed property via javascript. Don't ask me why I need to perform this crazy action (no, it is not about IE6). Here is the simplest, naive approach:

<html>

<style>
    .fixed{
        outline: 2px solid red;                                              
        width:100px;
        height:600px;
        position: absolute;                                                  
        background-color: pink;
    }

    body {
        height: 10000px;
    }                                                                        
</style>

<script>                                                                     
    document.addEventListener('DOMContentLoaded',function() {                
        var fixed = document.querySelector('.fixed');                        
        window.onscroll = function() {                                       
            var page_top = window.pageYOffset;
            fixed.style.top = page_top + 10 + 'px';                          
        }                                                                    
    }, false);
</script>

<body>
    <div class="fixed">                                                      

    </div>
</body>

In webkit browsers everything goes pretty well with this naive approach, but in Firefox and in Opera absolutely positioned content is not changing its top smoothly - we can see some kind of bkinking, as if browser can't refraw page fast.

Can somebody explain me how to solve this issue?

ansaurus

tags:

views:

answers:

How to implement css fixed property via javascript?

related questions