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硬件加速。

如果页面到达某个点，如何更改div的宽度或高度

2 个答案: