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).

Guy Cook · Answer 1 · 2016-10-02T23:48:57.000

27

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

edited Oct 02 '16 at 23:48

answered Jan 06 '12 at 10:38

Guy Cook

552
4
17

When i try this i get some strange rows at the button of the page? (dark grey and some lighter grey) – Maanstraat Jan 06 '12 at 10:50
I can't seem to reproduce that on a blank page, I'll edit in a link to a fiddle demo. – Guy Cook Jan 06 '12 at 10:58
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? – Tony Bolero Feb 15 '12 at 10:24
@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 – Guy Cook Mar 09 '12 at 13:42
Great answer. I extended it and added opacity and fixed a bug. See jsFiddle: http://jsfiddle.net/cek0rrow/1/ – Rusty Fausak Dec 02 '14 at 21:56
`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 – cwal Sep 21 '16 at 08:51

score 25 · Accepted Answer · answered Jan 06 '12 at 10:11

25

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

answered Jan 06 '12 at 10:11

redmoon7777

4,498
1
24
26

Thnx you! Perfect :) and how can i do it animated? just change the css to .animate({"background":"#F00"},500)? – Maanstraat Jan 06 '12 at 10:37
2

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: http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor – Ghost-Man Jan 06 '12 at 10:43
thx diEcho. and I second what @iTypist said, you need a plugin for a color animation to work – redmoon7777 Jan 06 '12 at 10:48
That plugin will not work for RGBA (which Maanstraat is asking). You need this modified version http://pioupioum.fr/sandbox/jquery-color/ – LostInComputer Jan 06 '12 at 11:28
@redmoon7777 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 : ). – Mathieu Marques Mar 01 '15 at 23:44

SSR · Answer 3 · 2016-09-09T06:25:39.387

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/

edited Sep 09 '16 at 06:25

answered Jun 24 '15 at 06:41

SSR

6,398
4
34
50

score 2 · Answer 4 · answered Jan 06 '12 at 10:24

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

score 0 · Answer 5 · answered Feb 21 '19 at 02:08

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.

score 0 · Answer 6 · answered Jan 06 '12 at 10:39

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>

This works but when you are going down but go back up the color will not change back... — Maanstraat, Jan 06 '12 at 10:48

jquery change background color user scroll

6 Answers6

css

jQuery

Linked

Related