javascript - スクロールしてdivの高さと幅の両方を縮小しますか?

Question

ページを下にスクロールしながら、div の高さと幅の両方を同時に縮小することは可能ですか? たとえば、ユーザーが下にスクロールすると、ページの中央に留まりながら、div サイズが 400px x 400px から 200px x 200px になりますか? jQueryを使用して高さまたは幅を縮小できることは知っていますが、両方を縮小することについては何も見ていません。

Answer 1

高さと幅を取得し、両方を減らしてから、スクロール イベント内で新しい値を再適用できます。

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

ユーザーが上にスクロールしたときに、この効果を逆にすることもできます。これはもう少し複雑ですが、ここに作業を開始するための実用的なフィドルがあります。