Perform action when object is visible in viewport

Question

I have a div on my page, and I would like the background color to change when the viewer scrolls down to it.

How can I do this?

Answer 1

The commenter above is right. You should try something first and when you get stuck, the community will help you get unstuck. That said, here's a quick jquery to solve your problem.

$(document).ready(function(){
    var offsetTop = $('#test').offset().top, //offset from top of element - element has id of 'test'
        finalOffset = offsetTop - document.documentElement.clientHeight; //screen size
    $(window).on('scroll',function(){
        var whereAmI = $(document).scrollTop();
        if(whereAmI >= offsetTop){
            console.log("i've arrived at the destination");
        }
    })
})

Note that the above code executes the console.log() at every point past your requirement (meaning from there downwards). In case you want the execution to happen only one, you need to adapt the code a bit. One more note - if you're checking this in a fiddle, this document.documentElement.clientHeight needs to be adapted to work in an iframe. So test it on your local machine.

Answer 2

I would have used CSS3 with something like this...

var elemTop = $('div').offset().top;
  $(window).scroll(function() {
     if($(this).scrollTop() == elemTop) {
       $('div').removeClass('hidden');
   }
});