當用戶在+ y軸和-y軸上滾動時，如何增加和減少高度屬性？

Question

以下是我爲SVG編寫的代碼。我試圖操縱ID #temp的高度屬性，每當用戶滾動。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 25.25 104" enable-background="new 0 0 25.25 104" xml:space="preserve"> 
    <rect id="temp" width="10" style="fill:rgb(0,0,255);" transform="rotate(180,5,2)" x="-7" y="-100"> 
    <!-- <animate attributeName="height" from="0" to="95" dur="3s"/> --> 
    </rect> 


<path id="thermo" d="M15.8,0H9.2C4.679,0,1,3.678,1,8.199V95.8c0,4.521,3.679,8.2,8.2,8.2h6.6c4.521,0,8.23.679,8.2-8.2V8.199 
C24,3.678,20.321,0,15.8,0z M22,95.8c0,3.419-2.781,6.2-6.2,6.2H9.2C5.781,102,3,99.219,3,95.8V84.5h8.25v-2H3v-6.357h8.25v-2H3 
v-6.357h8.25v-2H3v-6.356h8.25v-2H3v-6.357h8.25v-2H3v-6.357h8.25v-2H3v-6.357h8.25v 2H3V26h8.25v-2H3V8.199C3,4.781,5.781,2,9.2,2 
h6.6C19.219,2,22,4.781,22,8.199V95.8z"> 
</path> 

下面你可以看到我寫的JQuery，當頁面加載時，爲#temp獲得最小高度爲5。然後我試圖每次用戶滾動時將高度屬性增加一個。這似乎並沒有爲我工作。我將不勝感激。

var initHeight = $("#temp").attr("height", 5);initHeight(); 

$(window).on('scroll', function(){ 

$("#temp").attr("height", 5) ++; 

}); 

Fiddle

Answer 1

的問題是你設置變量initHeight什麼看起來像一個函數，然後調用它的功能，但它不是一個功能。你需要爲了使用它像一個函數聲明它是這樣的：

var initHeight = function(){ $("#temp").attr("height", 5); } 

我也宣告了起始編號，5裏面的滾動事件的變量，增量newHeight，然後將高度設置爲這個新號碼。

var newHeight = 5; 

$(document).on('scroll', function(){ 
    newHeight += 1; 
    $("#temp").attr("height", newHeight); 
}); 

您還可以遞增attr調用，比如這裏面：++newHeight其設置之前增加了。使用newHeight++將設置高度，然後增加它。

DEMO