Creating a Fixed Header Image

I am trying to get a sticky navigation bar which goes back in place working with the last file jon send.
But the bar always jumps right on top, when i start scrolling - what am i doing wrong?

In the header i put:

<style>
	.sticky{
	position: fixed !important;
	}
	</style>

than i run a function on sceneload

lastPos = {
y1 : 0,
y2 : 0
}

el = hypeDocument.getElementById('menu');
sPos = el.getBoundingClientRect().top;

window.onscroll=function(){
wY = window.pageYOffset || (document.body.scrollTop || document.documentElement.scrollTop) ;
lastPos.y1 = lastPos.y2; lastPos.y2 = wY;

if(wY >= sPos){
el.style.left = null;
el.style.margin = 'auto';
el.style.top = '0px';
el.setAttribute("class","sticky");
}
if (lastPos.y2 < lastPos.y1 && wY <= sPos){
el.style.top = sPos + 'px';
el.setAttribute("class","");
}

};