Javascript-форум - Почему изображение делает скачек вверх перед началом работы эффекта parallax?

Доброго времени суток!
Я недавно начал изучать создание сайтов, tml, css и javascript.
Делаю сайт с эффектом parallax, на сайте вверху идут три картинки, которые должны начать "уползать" при скроллинге с разной скоростью. Но после написания скрипта к для первой картинки она, оставаясь с самого начала (до скроллинга) в нужной позиции, при начале скроллинга резко прыгает вверх, и уже оттуда начинает плавное движение. Почему это происходит и как это исправить?

Я еще очень мало разбираюсь в javascript, этот скрипт использую по уроку, имея только общее представление о принципе его работы. Поэтому еще такой вопрос, правильный ли метод для parallax эффекта я использую?

Заранее большое спасибо!

HTML:

<!doctype: html>
<html>
 
<head>
 
<meta charset="utf-8">
<title>Кулдига</title>
<link type="text/css" rel="stylesheet" href="Pages/Kuldiga_Style.css" />
 
<script>
    function parallax() {
        var doma_1 = document.getElementById ("doma-1");
        doma_1.style.top = -(window.pageYOffset / 2)+"px";
    }
    
    window.addEventListener("scroll",parallax,false);
 
    
</script>
 
</head>
 
<body>
    <div id="main">
    
    
        <div id="header">Заголовок</div>
    
    
    
        <div id="doma">
                <div id="doma-1"></div> 
                <div id="doma-2"></div> 
                <div id="doma-3"></div> 
        </div>
        
 
 
        <div id="content">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        <div id="footer">Футер</div>
    </div>
 
</body>
 
</html>

CSS:

Код:

body {

    background: url(../Materials/Photo/Livia/fon.png);

    background-repeat: repeat;

    background-size: 500px;

    background-attachment: fixed;

    

    

}

 

* {

    padding:0;

    margin:0;

}

 

 

 

#header {

    font-style: italic;

    height: 50px;

    padding: 20px;

    width: 90%;

    margin: auto;

    text-align: center;

 

 

}

 

 

 

 

#footer {

        

        margin-top: 500px;

        height: 100px;

        text-align: center;

        margin-left: auto;

        margin-right: auto;

        padding: 20px;

        }

        

#content {

    position: absolute;

}

        

/*картинки */

 

#doma-1 {

    position:fixed;

    width: 100%;

    height: 100px;

    margin-top: 50px;

    

    background: url(../Materials/Photo/Kuldiga/doma-1.png) repeat-x;

    background-size: auto 100%;

    

    

}

 

#doma-2 {

position: fixed;

    width: 100%;

    height: 100px;

    margin-top: 200px;

    

    background: url(../Materials/Photo/Kuldiga/doma-2.png) repeat-x;

    background-size: auto 100%;

    

}

 

#doma-3 {

    position: fixed;

    width: 100%;

    height: 100px;

    margin-top: 350px;

    

    background: url(../Materials/Photo/Kuldiga/doma-3.png) repeat-x;

    background-size: auto 100%;

    

}