parallax div jumps to the top of the page

Question

I'm trying to create a parallax effect on a div but it jumps the the top of the page as i start scrolling. The top value is changes to 0 immediately

HTML

<div class="container">
<div class="top">
</div>
<div class="middle">
</div>
<div class="slider" id="rowSlider">
</div>
<div class="content">
</div>
</div>

JS

function parallax(){
    var prlx_lyr_1 = document.getElementById('rowSlider');
    prlx_lyr_1.style.top = -(window.pageYOffset / 2)+'px';
}
window.addEventListener("scroll", parallax, false);

CSS

.container{width:100%;}
.top{position:fixed; top:0; left:0; width:100%; z-index:1; background:#000; height:50px;}
.middle{width:100%; height:150px; background:red; width:100%; position:relative; z-index:2; margin-top:50px;}
.slider{width:100%; position:fixed; height:200px; background:orange; left:0; top:200px; z-index:3;}
.content{width:100%; position:relative; z-index:4; height:200px; background:blue; margin-top:400px;}

JSFIDDLE DEMO

Answer 1

Thanks to dann:

Initial position for .slider is 200px. solution is:

prlx_lyr_1.style.top = (200-(window.pageYOffset / 2))+'px';

https://jsfiddle.net/rd9kot8p/3/