Trying to trigger a change in the background color of my header. Idea is when the page scrolls down to 150 px from the top, the color changes to from solid to a gradient. So I'm not sure if this code is correct here.....

```
jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > 150) {
         jQuery('.site-header').css({'background': 'rgba(255,255,255,1)', 'background': '-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)', 'background': '-webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(65%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));', 'background': '-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%);', 'background': '-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%);', 'background': '-ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)', 'background': 'linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)', 'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 )' }); 
    }
});

```

Here's a simplified version of the HTML:

```
<header id="masthead" class="site-header banner" role="banner"></header>

```

And the initial CSS:

```
.site-header { background: rgba(255,255,255,1); transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out;position: fixed; display: block; margin: 0 0 30px 0; width: 100%; z-index: 1; }

```

The idea is I eventually want to make a CSS transistion from the gradient to the solid background via a fade.

Any idea where I goofed in my code?