Как увеличить и уменьшить атрибут высоты, когда пользователи прокручиваются по оси + y и оси -y?

Question

Ниже приведен код, который я написал для SVG. Я пытаюсь манипулировать атрибутом height для 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 я написал, чтобы получить минимальную высоту 5 для #temp при загрузке страницы. Затем я пытаюсь увеличить атрибут высоты каждый раз, когда пользователь прокручивается. Кажется, это не работает для меня. Я был бы признателен за помощь.

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