通過滾動縮小div的高度和寬度？

在向下滾動頁面的同時，是否可以同時收縮div的高度和寬度？例如，當用戶向下滾動時，div大小從400px增加400px變爲200px增加200px，同時停留在頁面中心？我知道有可能使用jQuery縮小高度或寬度，但是我還沒有看到任何縮小這兩者的方法。通過滾動縮小div的高度和寬度？

來源

2014-01-12 superquestion

yes只需使用scroll事件來使用scrollTop捕捉文檔的位置，並使用$（div）.width設置div的寬度，並使用相同的高度/使用.css（）。 – Rohan

您可以獲取高度和寬度，同時遞減兩個值，然後重新應用滾動事件內的新值。

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

您也可以在用戶向上滾動時反轉此效果。這是多一點涉及，但這是一個工作fiddle讓你開始。

來源

2014-01-12 03:20:28 zsaat14

我添加了一堆換行符來看看它滾動時的樣子，它工作得很好！但是我注意到，當您向後滾動時，它並不總是會恢復到400像素×400像素。難道是 'divHeight- = 5; divWidth- = 5; ' 當您向後滾動到頁面頂部時不會重置？ – superquestion

@superquestion它可能取決於你滾動的速度。滾動得越快，函數被調用的次數就越少。因此，如果你慢慢向上滾動，你會得到一個更小的div。如果您希望大小始終恢復，則需要執行以下操作http://jsfiddle.net/hmu3c/1/此代碼根據距離頂部的距離設置高度和寬度。所以它始終是頂部相同的尺寸。 – zsaat14

爲什麼當一個圖像使用相同的id，保證金規則不再適用？（我試圖讓它在頁面中水平和垂直居中，所以我想知道爲什麼保證金規則不再適用是一個很好的起點。）另外，我很確定有一種方法可以停止圖像從縮小到一定的大小後，一旦它達到這個尺寸，圖像將不再固定在視口的中心（我很確定這是進入視差類型的東西）。 http://jsfiddle.net/hmu3c/1/ – superquestion

通過滾動縮小div的高度和寬度？

回答

相關問題