Shrink both height and width of a div by scrolling?

问题

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 by 400px to 200px by 200px while staying in the center of the page? I know it's possible to shrink the height OR the width using jQuery, but I haven't seen anything on shrinking both.

回答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.

来源：https://stackoverflow.com/questions/21070882/shrink-both-height-and-width-of-a-div-by-scrolling