Shrink both height and width of a div by scrolling?

Question

Is it possible to shrink both the height and the width of a div simultaneously while scrolling down a page? For example, as the user scrolls down, the div size goes from 400px b

Answer 1

You can get the height and width, decrement both, and then reapply the new values inside of a scroll event.

var divToChange = $('#sizeShifter');
$(document).scroll(function(){
    var divHeight = divToChange.height();
    var divWidth = divToChange.width();
    divHeight-=5;
    divWidth-=5;
    divToChange.css({width:divWidth, height:divHeight});
});

You can also reverse this effect when the user scrolls up. This is a little more involved, but here is a working fiddle to get you started.