jquery change background color user scroll

Question

Is it possible with jquery that when a user scrolls down the page that the background animate from 50% white to 90% white or someting?

So first it is the color

Answer 1

Here is an answer that is adapted from a W3 tutorial, the javascript.

 window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 420 || document.documentElement.scrollTop > 420) {
document.getElementById("navigationBar").style.background = "#2E5894";

} else {
   document.getElementById("navigationBar").style.background = "transparent";

}
}

This changes a specific id, for me my navigation bar. For easy transitions, add this to your css, under the navigationBar "id" in this case (alongside other specifications youd like).

 #navigationBar{
/*my header bar, no need to follow this*/
overflow: hidden;
color: white;*/
width:100%;
position: fixed;
-webkit-transition: all ease-out .5s;
-moz-transition: all ease-out .5s;
-o-transition: all ease-out .5s;
 transition: all ease-out .5s;
 }

This will give you a bar that changes color gradually after 420 pixels.