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 rgba(255,255,255,.5) and when a user scroll 210px below the color become rgba(255,255,255,.9).

Salutatory

Answer 1

here you go (this will change the page color to blue when you scroll more than 210px, and will revert back to red if you go back up):

$(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos > 210) {
                    $("body").css('background-color', 'blue');
                } else {
                    $("body").css('background-color', 'red');
                }
            });
        });

Jud

Thnx you! Perfect :) and how can i do it animated? just change the css to .animate({"background":"#F00"},500)? – Salutatory

just changing the css to .animate() will not work for background color. jQuery probably doesn't support animating the background color. You will have to take help of jquery UI or some plugin. Refer this question: #191060 – Refugio

thx diEcho. and I second what @iTypist said, you need a plugin for a color animation to work – Jud

That plugin will not work for RGBA (which Maanstraat is asking). You need this modified version pioupioum.fr/sandbox/jquery-color – Anticatalyst

@Jud Does this mean that for every pixel you scroll, the style will be updated ? Or can jQuery detect that it doesn't need to when the old and new values are the same ? I know modern browser on modern computer can handle this quite easily, but I'm curious : ). – Hileman

Answer 2

Updated, more generic version:

var tStart = 100 // Start transition 100px from top
  , tEnd = 500   // End at 500px
  , cStart = [250, 195, 56]  // Gold
  , cEnd = [179, 217, 112]   // Lime
  , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[2] - cStart[2]];

$(document).ready(function(){
    $(document).scroll(function() {
        var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
        p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
        var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
        $("body").css('background-color', 'rgb(' + cBg.join(',') +')');
    });
});

In action

If you want a smooth, gradiated change when scrolling you should try

$(document).ready(function(){
    $(document).scroll(function() {
        var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop() / 210, 0.9);
        var channel = Math.round(alpha * 255);
        $("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')');
    });
});

JSFiddle

Mackoff

When i try this i get some strange rows at the button of the page? (dark grey and some lighter grey) – Salutatory

I can't seem to reproduce that on a blank page, I'll edit in a link to a fiddle demo. – Mackoff

Great code! How could I change the color? Now it's from dark grey to light grey. What if I want to change it from yellow to white? – Elviaelvie

@TonyBolero If you're still looking for this I've updated the answer with a more generic version - just plug in your start and end colours and y-positions and it should be good – Mackoff

Great answer. I extended it and added opacity and fixed a bug. See jsFiddle: jsfiddle.net/cek0rrow/1 – Bolognese

cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]]; this line should be changed to cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[2] - cStart[2]]; not sure if it was a typo but makes more sense to subtract the 3rd numbers form each other – Decoteau

Answer 3

For smooth transition effect you should check scroll position, accordingly you can change bg-color. use .animate function of jquery.

I found the perfect what I was looking for here 

http://jsfiddle.net/cgspicer/V4qh9/

Phyle

Answer 4

with help of @redmoon7777

css

body{ height:5000px; }
.fifty { background:rgba(25,20,25,.5) }
.ninty {  background:rgba(25,20,25,.9) }

jQuery

 $(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 210) {
                $("body").removeClass().addClass('ninty');
            } else {
                $("body").removeClass('ninty').addClass('fifty');
            }
        });
    });

DEMO

Protamine

Answer 5

With animation

<html>
<head>
<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() > 210)
            $('#bk').animate({backgroundColor: 'rgba(255,255,255,.9)'}, 1000);
    });
});
</script>
</head>
<body style="background: black">
<div id="bk" style="background-color: rgba(255,255,255,.5); height: 200%; min-height: 400px">
<!--change this element's background transparency instead of body so that you will see the effect -->
</div>
</body>
</html>

Anticatalyst

This works but when you are going down but go back up the color will not change back... – Salutatory

Answer 6

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.

Dobruja