<style type="text/css">
/*<![CDATA[*/
#foo {
   width : 150px;
   height : 150px;
   background : red;
   display : none;
   position : fixed;
   top : 45px;
   left : 430px;
}
/*]]>*/
</style>

foo<br />
foo<br />
foo<br />
foo<br />

<div id="foo">
</div>
foo<br />
foo<br />
foo<br />
foo<br />

<script type="text/javascript">
        /* <![CDATA[ */
        var foo = document.getElementById('foo');
        
        window.onscroll = function() {
                foo.style.display = ((window.pageYOffset || document.documentElement.scrollTop) > 200) ? 'block' : 'none';
                foo.style.background = ((window.pageYOffset || document.documentElement.scrollTop) > 400) ? 'green' : 'red';
        };
        /* ]]> */
</script>

Quelle: www.tutorials.de