Change background colour on scroll

Hi All,

I currently have the below code that changes the background colour when scrolling. There a a few problems with the code below:

1. the colour only changes on scroll down and does not change back on scroll up.

2. I would like to set a more accurate point for when the colour changes. i.e. I would like to set it to change once a certain anchor comes into the viewport or to change at 200 vh for example. Any help would be greatly appreciated.

Many Thanks,

Alex

#test{

  height: 200vh;

  width: 100%;

  display: block;

  background-color: rgba(255,255,255,1);

}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!--for RGBA support. http://pioupioum.fr/sandbox/jquery-color/ -->

<script type="text/javascript" src="https://raw.github.com/piouPiouM/jquery-color/master/jquery.color.js"></script>

<!--the magic -->

<script type="text/javascript">

$(document).ready(function(){

    $(document).scroll(function(){

        if($(this).scrollTop() > 200)

            $('#test').animate({backgroundColor: 'rgba(0,0,0,.9)'}, 1000);

    });

});

</script>