当用户在 +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 的最小高度。然后我试图在每次用户滚动时将 height 属性增加一。这似乎对我不起作用。我将不胜感激。

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