0

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?

Improve this question
2
  • 2
    instead of setting the background in js, have you thought of setting the new background as a class in css and just toggling (add/remove) the class to change the background? should be a lot easier to test. Commented Sep 27, 2015 at 18:36
  • 1
    also, the single quotes inside the 'filter' value will be breaking your code. Commented Sep 27, 2015 at 18:38

2 Answers 2

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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');
    }

});
Improve this answer

6 Comments

I've done that but for a CSS transition, it won't work.
With that code, I could make it where the background color changes when scrolling down to that point, but nothing happens. Only when you scroll back up. I'd want to see the transition in both directions and I think that's the problem with your method since ti adds a style on the fly. And I think the style needs to be there at all times.
As far as i know you can not animate gradients, but you can animate colors. Using UI/Color Libraries.
So is there a way to animate the background color some other way using JS?
Ya you could animate background-color but not gradient.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.