HTML/CSS/JS Fixed position div is not fixed

Question

Basically, I'm coding a site and I want to implement a JQuery progress bar, I can get it to appear in my site just perfectly, however if I start scrolling with the position:fixed; the position jumps to hover 1/7th of the way down my page, and therefore after 7 scroll clicks down, it has left the page by the bottom, when I apply the same CSS to an image that have used on this object, the image behaves properly.

Also if I scroll back up to the top, the progress bar will never quite reach where it originally started.

Here is a jsfiddle .

HTML

<div id="progressbar"></div>

CSS

#progressbar {
position: fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:20px;
}

There is a fiddle of my code, however the jQuery script doesn't seem to appear and I haven't used fiddle enough to be able to get it to display properly, so if it is a basic thing I've missed, that would be awesome if it could be pointed out too.

Answer 1

The reason your progressbar doesn't come back to the same position is this:

if (scroll <= 28) {
    progressbar.style.top = "30px";
}

You are telling it that once you scroll, if the distance from the top is less than 28px it should go to 30px from the top while it starts at 0. Even if you start by scrolling 1px down it'll jump to 30px.