jquery - 每当页面到达某个点时如何更改div的宽度或高度

Question

我想用 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;
}

Answer 1

以下代码将帮助您..

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

检查这个DemoFiddle

Answer 2

您可以通过以下方式获取当前滚动位置

$("body").scrollTop()

和

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

每当滚动页面时，您都可以检索 scrollTop ：

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

你应该使用 CSS 动画，因为一些浏览器现在使用 3d 硬件加速。