如何在頁面到達某個點時更改div的寬度或高度

Question

我想用div創建彈出效果。有人可以告訴我如何改變div的寬度，只要50％的頁面向下滾動。意味着每當頁面達到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"); 
    } 
} 

你應該因爲有些瀏覽器的使用3D硬件加速現在使用CSS動畫。