Search code examples
jquerycolorsbackgroundscrollbackground-color

jquery change background color user scroll

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

Solution

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