1

divでポップアウト効果を作りたかった。ページの 50% が下にスクロールされるたびに div の幅を変更する方法を教えてください。つまり、ページが 50% のポイントに達すると、div の幅は 100px に変更され、50% 未満に達するかページが上にスクロールされると、div は元の幅 (50px など) に戻ります。jqueryで作るにはどうすればいいですか？これが基本構造です。

http://jsfiddle.net/FpUKU/1/

#box {
    position:fixed; bottom:0; right:0;
    width:50px; height:100px; background:green;
}
4

2 に答える 2

1

次のコードはあなたを助ける..

$(function () {
    $(window).scroll(function () {
        var aheight = $(window).height() / 2;
        if ($(this).scrollTop() >= aheight) {
            $("#box").css("width", "100px");
        }
        else {
            $("#box").css("width", "50px");
        }
    });
});

このデモフィドルをチェック

于 2013-10-08T09:40:35.643 に答える
1

現在のスクロール位置を取得するには

$("body").scrollTop()

と

$(document).scroll(function(){
});

ページがスクロールされるたびに scrollTop を取得できます。

$(document.scroll(function(){
   if ($(document).height()/2 < $("body").scrollTop()) {
      $("#box").addClass("wide");
   } else {
      $("#box").removeClass("wide");
   }
}

現在、一部のブラウザは 3D ハードウェア アクセラレーションを使用しているため、CSS アニメーションを使用する必要があります。

于 2013-10-08T09:44:22.257 に答える