Maanstraat Maanstraat - 2 months ago 20
jQuery Question

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

Answer

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