Sticky nav makes header jump

Question

I am working with sticky nav and seems like when I scroll the header jumps up, and it is not smooth.

DEMO

Maybe a CSS problem? or JS?

JS used:

var win      = $(window),
    fxel     = $('nav'),
    eloffset = fxel.offset().top;

    win.scroll(function() {
    if (eloffset < win.scrollTop()) {
        fxel.addClass("fixed");
    } else {
        fxel.removeClass("fixed");
    }
    }); 

Answer 1

The problem is that when the header is asigned the fixed position, the height of the header is gone above the rest of the elements so it jumps up to the top of the document. I changed some of your CSS, so that the header is absolute and the content has a margin from the top. See: http://jsfiddle.net/FZpf7/2/ and you will see the jumping is gone.

Changed CSS:

nav {
  background-color:#FBFBFB;
  color:white;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
}

div.header_med { 
 margin-top:  95px;
}

---

Edit: This is the second JSFiddle link http://jsfiddle.net/FZpf7/3/

Answer 2

Remove the margin / padding on both html and body, and remove the margin-top of #container :

body, html{
    margin:0px;
    padding:0px;
}

#container {
  /*margin-top:10px;*/
}

Check the demo, I might have misunderstood your problem!