Changes background color gradient using Javascript and RGBA

Question

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?

Answer 1

Answering the whole thin again with different tricky solution. Since you are using JQuery, this is the best trick.

Trick:

We are going to place a dummy div with background of your gradient. Which would be between <header> and your one more internal-div (you need to add this which holds your header content).

Now here we have header over that a dummy div and over that your content of header All of them are overlapping each other. They are stacked like:

Header (Below) > Dummy-div(Middle) > Menu-div(Top)

So initially this dummy div named .overlay is hidden using JQuery, so now when you scroll to 150 from top this dummy div with gradient will fade-in()

DEMO.

function overlayHeight(){    
var hOfHead = $('header').outerHeight();
$('.overlay').css('height', hOfHead + 'px');
}

overlayHeight();

$(window).on('resize', function(){
   overlayHeight();
});

$('.overlay').hide();

$(window).scroll(function(){
    
    if ($(this).scrollTop() > 150)
    {
    	$('.overlay').fadeIn('slow');
    }
    
    if($(this).scrollTop() < 150)
    {
       $('.overlay').fadeOut('slow');
    } 
});

/* CSSTerm.com Simple CSS menu */

body
{
    width:100%;
    margin:0px;
}
header
{
    position:fixed;
    margin:0px;
    top:0px;
    width:100%;
    background:#2b2937;
    z-index:999;
}

header .overlay
{
    display:inline-block;
    position:absolute;
    width:100%;
    left:0px;
    right:0px;    
    background: -webkit-linear-gradient(red, blue); /* For Safari 6.1 to 6.0 */
    background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, blue); /* Standard syntax (must be last) */
    z-index:-1;
}

.menu
{
    margin:0px;
    width:100%;
    z-index:999;
}

.menu ul 
{
    text-align:center;
    width:100%;
    padding:0px;
    margin:0px;
    list-style:none;
}

.menu ul li
{
    display:inline-block;
    padding:10px 35px;
}

a{
    color:white;
    text-decoration:none;
}

p{
    position:relative;
    padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header id="masthead" class="site-header banner" role="banner">
    <span class="overlay"></span>
    <span class="menu">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li> 
            <li><a href="#">Link 5</a></li>
        </ul>
    </span>
</header>
<br>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

Answer 2

Just try overriding the background property by adding/removing a class, alike this:

Add your background properties of gradient in :

CSS

.gradientClass
{
  ......
}

Add remove above class as below:

JQuery

jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > 150) {
         jQuery('.site-header').addClass('gradientClass');
    }
    else{
         jQuery('.site-header').removeClass('gradientClass');
    }

});