Добрый вечер. Говорю сразу в 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>