Скрипт не работает после обновления страницы

[werwolf4]

Добрый вечер. Говорю сразу в js не силен. Только начал изучать. Написал скрипт, который при прокрутке экрана до определенной области выдвигает блоки с изображением и текстом из под основного изображения. Скрипт работает но при обновлении страницы всем Id присваиваются стили из блока else и при прокрутки не меняются на необходимые. Так происходит при обновлении страницы через кнопку обновить и комбинацию ctrl+r, если нажать в адресной строке на Entre все работает. Подскажите пожалуйста как это исправить. Заранее огромное спасибо.

Вот код:
<div class="stroenie">
<div class="conteiner">
<h2>СТРОЕНИЕ</h2>
<div id="bigImgStroenie"><img src="img/kartinka.png" alt="...">
<div id="imgOne"><img src="img/sezon.png" alt="..."><p>Металлическая труба диаметром 25 мм</p></div>
<div id="imgTwoe"><img src="img/mont.png" alt="..."><p>Порошковая покраска</p></div>
<div id="imgThree"><img src="img/pole.png" alt="..."><p>Поле цельное приварено</p></div>
<div id="imgFour"><img src="img/ocenkovka.png" alt="..."><p>Рекламное поле - оцинкованный лист</p></div>
<div id="imgFive"><img src="img/kolco.png" alt="..."><p>Кольцо для цепочки</p></div>
</div>
<script type="text/javascript" >
var first = document.querySelector('#bigImgStroenie');
var imgOne = document.querySelector('#imgOne');
var imgTwoe = document.querySelector('#imgTwoe');
var imgThree = document.querySelector('#imgThree');
var imgFour = document.querySelector('#imgFour');
var imgFive = document.querySelector('#imgFive');
var height = first.getBoundingClientRect();

function asideScroll() {
if (window.pageYOffset >= height.top-500 && window.pageYOffset <= height.bottom-1400) {
imgOne.style.right = '229px';
imgTwoe.style.right = '229px';
imgThree.style.left = '229px';
imgFour.style.left = '229px';
imgFive.style.bottom = '973px';
}else{
imgOne.style.right = '0px';
imgTwoe.style.right = '0px';
imgThree.style.left = '0px';
imgFour.style.left = '0px';
imgFive.style.bottom = '1200px';
}
}
window.addEventListener('scroll', asideScroll, false);
</script>

[Brutus]

Добавь в самом конце простой вызов функции asideScroll

[werwolf4]

Решил проблему следующим образом. т.к. при перезагрузки страницы расстояние от верха до нужного блока рассчитывалось не верно вписал это расстояние в твердых числах, в итоге получился следующий скрипт

var imgOne = document.querySelector('#imgOne');
	var imgTwoe = document.querySelector('#imgTwoe');
	var imgThree = document.querySelector('#imgThree');
	var imgFour = document.querySelector('#imgFour');
	var imgFive = document.querySelector('#imgFive');
	var test;
	
function ScrollTop(){
	var top =6540;
	var bottom = 7175;
  	test = window.pageYOffset;
  	if(test >= top && test <= bottom){
	    imgOne.style.right = '229px';
	    imgTwoe.style.right = '229px';
	    imgThree.style.left = '229px';
	    imgFour.style.left = '229px';
	    imgFive.style.bottom = '973px';
	}else{
	  	imgOne.style.right = '0px';
	  	imgTwoe.style.right = '0px';
	  	imgThree.style.left = '0px';
	  	imgFour.style.left = '0px';
	  	imgFive.style.bottom = '1200px';
	}
}
window.addEventListener('scroll', ScrollTop, false);