Change background colour on scroll

[Alex_roo]

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>

[Nancy OShea]

If you post a working example of this online, you might get more help.

Nancy O.

[Alex_roo]

Hi Nancy,

This is a working example that I have found online, see if this helps: Not Studio - London Design Agency

Cheers

[Nancy OShea]

See if either of these Code Pens help you.

https://codepen.io/Funsella/pen/yLfAG

http://codepen.io/Funsella/pen/dpRPYZ